中心/设置地图缩放以覆盖所有可见的标记?

时间:2013-10-10 19:28:05

标签: javascript google-maps-api-3

我在地图上设置了多个标记,我可以静态设置缩放级别和中心,但我想要的是,覆盖所有标记并尽可能缩放所有市场可见

可用方法如下

setZoom(zoom:number)

setCenter(latlng:LatLng)

setCenter不支持多个位置或位置数组输入,setZoom也不支持此类功能

enter image description here

4 个答案:

答案 0 :(得分:622)

您需要使用fitBounds()方法。

var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
 bounds.extend(markers[i].getPosition());
}

map.fitBounds(bounds);

来自developers.google.com/maps/documentation/javascript

文档

  

fitBounds(bounds[, padding])

     

参数:

`bounds`:  [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1]
`padding` (optional):  number|[`Padding`][1]
     

返回值

     

将视口设置为包含给定的边界   注意:当地图设置为display: none时,fitBounds函数会将地图的大小读为0x0,因此无法执行任何操作。要在隐藏地图时更改视口,请将地图设置为visibility: hidden,从而确保地图div具有实际大小。

答案 1 :(得分:164)

用一些有用的技巧来扩展给定的答案:

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之前,最好使用定义的侦听器进行缩放操作 感谢@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);

答案 2 :(得分:6)

这个MarkerClusterer客户端实用程序可用于Google Map developer Articles中指定的Google地图,此处简要说明了它的用途:

有许多方法可以满足您的要求:

  • 基于网格的群集
  • 基于距离的群集
  • 视口标记管理
  • Fusion Tables
  • Marker Clusterer
  • MarkerManager

您可以在上面提供的链接上阅读它们。

Marker Clusterer使用基于网格的群集来聚集所有希望网格的标记。基于网格的聚类通过将地图划分为特定大小的正方形(每个缩放处的大小更改),然后将标记分组到每个网格方块中来工作。

群集前 Before Clustering

群集后 After Clustering

我希望这就是你要找的东西。这将解决您的问题:)

答案 3 :(得分:5)

数组的大小必须大于零。 否则你会有意想不到的结果。

"@VP $+ (CC $+ @VP)"