居中/设置地图缩放以覆盖所有可见标记?
2022-08-29 23:29:51
我在地图上设置了多个标记,我可以静态设置缩放级别和中心,但我想要的是,覆盖所有标记并尽可能地缩放,使所有市场可见
可用方法如下
和
既不支持多个位置或位置数组输入,也不具有此类功能setCenter
setZoom
我在地图上设置了多个标记,我可以静态设置缩放级别和中心,但我想要的是,覆盖所有标记并尽可能地缩放,使所有市场可见
可用方法如下
和
既不支持多个位置或位置数组输入,也不具有此类功能setCenter
setZoom
您需要使用该方法。fitBounds()
var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(markers[i]);
}
map.fitBounds(bounds);
developers.google.com/maps/documentation/javascript 文档:
fitBounds(bounds[, padding])
参数:
`bounds`: [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1] `padding` (optional): number|[`Padding`][1]
返回值:没有
设置视区以包含给定的边界。
注意:当 map 设置为 时,该函数将地图的大小读取为 ,因此不执行任何操作。要在地图隐藏时更改视区,请将地图设置为 ,从而确保地图 div 具有实际大小。display: none
fitBounds
0x0
visibility: hidden
用一些有用的技巧来扩展给定的答案:
var markers = //some array;
var bounds = new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++) {
bounds.extend(markers[i].getPosition());
}
//center the map to a specific spot (city)
map.setCenter(center);
//center the map to the geometric center of all markers
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1);
// set a minimum zoom
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){
map.setZoom(15);
}
//Alternatively this code can be used to set the zoom for just 1 marker and to skip redrawing.
//Note that this will not cover the case if you have 2 markers on the same address.
if(count(markers) == 1){
map.setMaxZoom(15);
map.fitBounds(bounds);
map.setMaxZoom(Null)
}
更新:
该主题的进一步研究表明,fitBounds()是一个异步的,最好在调用Fit Bounds之前使用一个听者进行Zoom操作。
感谢@Tim,@xr280xr,关于这个主题的更多例子:SO:setzoom-after-fitbounds
google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
this.setZoom(map.getZoom()-1);
if (this.getZoom() > 15) {
this.setZoom(15);
}
});
map.fitBounds(bounds);