谷歌地图Api v3,使用地方库时的动态缩放级别
Google Maps Api v3, dynamic zoom level when using places library
我有一个(相当大的)JSON对象数组,每个数组都包含一个Latitude和一个Longitude值。当我的谷歌地图加载时,我循环浏览这个数组,并创建一个新的标记,添加到地图中。
除此之外,我正在使用Google Maps Api v3 Places插件(在这个例子中几乎是开箱即用的:https://developers.google.com/maps/documentation/javascript/examples/places-searchbox)
当我搜索给定的地址时,我需要确保至少有N个标记在地图上可见。现在,我已经将缩放级别始终设置为10。然而,当我搜索法罗群岛(那里大约有5个标记)时,缩放级别太近,用户看不到5个标记。
是否有任何方法可以动态设置缩放级别,以便用户至少可以看到4或5个标记?:-)
我的代码如下:
$(document).ready(function () {
var map = null;
var markers = [];
var overlays = [];
var infowindow = new google.maps.InfoWindow();
// Init google map (API v. 3)
var mapOptions = {
center: new google.maps.LatLng(56.161, 10.77),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker, i;
for (i = 0; i < data.length; i++) {
// Create a new marker
marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
map: map,
title: data[i].Name
});
// Add the marker to a global array for filtering
markers.push(marker);
}
// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function () {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
if (markers[i].type == "userMarker") {
marker.setMap(null);
}
}
// For each place, get the icon, place name, and location.
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
marker.type = "userMarker";
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(11);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function () {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
提前感谢!
这是我用来确保在搜索或更改位置等时在地图上着陆时至少有一个标记可见的方法。它只确保一个标记在视图中以及用户/搜索查询的当前位置(marker_location)。
我的标记数组称为mapMarkers[],我认为查看您的代码,您需要将其更新为标记。
它目前会找到离地图中心最近的标记(c),但您可以将其更新为另一个位置。
只要需要更新,请运行setBounds()。
希望您能够扩展它,以确保页面上有您需要的任何标记。每个标记距离都存储在distance[]数组中,所以可以对其进行数组排序,一个for循环,然后返回一个标记和边界的数组。在每个标记和边界上扩展??
function rad(x) {return x*Math.PI/180;}
var c = map.getCenter(),
lat = c.lat(),
lng = c.lng();
center_location = new google.maps.LatLng(lat, lng);
function find_closest_marker() {
var R = 6371; // radius of earth in km
var distances = [];
var closest = -1;
for( i=0; i<mapMarkers.length; i++ ) {
var mlat = mapMarkers[i].position.lat();
var mlng = mapMarkers[i].position.lng();
var dLat = rad(mlat - lat);
var dLong = rad(mlng - lng);
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(rad(lat)) * Math.cos(rad(lat)) * Math.sin(dLong/2) * Math.sin(dLong/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
distances[i] = d;
if ( closest == -1 || d < distances[closest] ) {
closest = i;
}
}
return mapMarkers[closest];
}
function setBounds(){
var closestMarker = find_closest_marker();
var bounds = new google.maps.LatLngBounds();
bounds.extend(closestMarker.position);
bounds.extend(center_location);
map.fitBounds(bounds);
}
相关文章:
- 动态设置谷歌地图缩放
- 如何动态缩放 pdf 图像
- 如何在OpenLayers中的Heatmap.js中动态调整缩放
- 谷歌地图Api v3,使用地方库时的动态缩放级别
- 在交互式图表中动态缩放数据,其中数据会发生变化
- 显示图形点的平均值,随着用户缩放而动态修正
- 浮标:缩放动态图
- 使用缩放级别动态更改谷歌地图上的圆半径
- 使用 CSS 转换或 javascript 来缩放元素以动态适应其父元素
- 图表与动态图:数据采样取决于缩放
- 如何在只使用像素的特定Javascript中动态缩放元素
- 如何在初始化期间在Google Maps API上动态设置缩放值
- HighCharts动态更改缩放选择MarkerFill颜色
- d3.行为缩放鼠标滚轮缩放中心的动态偏移
- 如何动态缩放非常大的图像
- 在AMMAP中动态设置和缩放国家地图
- 如何防止动态maplayer在每次缩放或平移地图时刷新?
- 根据图表上的每个系列的缩放级别动态地向高图添加平均值
- 如何使用css和js来确保动态文本的缩放和向上滑动
- 画布图形的动态缩放