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

本文翻译自：Center/Set Zoom of Map to cover all visible Markers?

I am setting multiple markers on my map and I can set statically the zoom levels and the center but what I want is, to cover all the markers and zoom as much as possible having all markets visible 我在地图上设置了多个标记，我可以静态设置缩放级别和中心，但我想要的是，覆盖所有标记并尽可能缩放所有市场可见

Available methods are following 可用的方法如下

setZoom(zoom:number)

and 和

setCenter(latlng:LatLng)

Neither setCenter supports multiple location or Location array input nor setZoom does have this type of functionality setCenter既不支持多个位置或位置数组输入，也不支持setZoom具有此类功能

---

#1楼

参考：https://stackoom.com/question/1J006/中心-设置地图缩放以覆盖所有可见的标记

---

#2楼

You need to use the fitBounds() method. 您需要使用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);

---

Documentation from developers.google.com/maps/documentation/javascript : 来自developers.google.com/maps/documentation/javascript的 文档 ：

fitBounds(bounds[, padding])

Parameters: 参数：

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

Return Value: None 返回值：无

Sets the viewport to contain the given bounds. 将视口设置为包含给定边界。
Note : When the map is set to display: none , the fitBounds function reads the map's size as 0x0 , and therefore does not do anything. 注意 ：当map设置为display: none ， fitBounds函数将地图的大小读为0x0 ，因此不执行任何操作。 To change the viewport while the map is hidden, set the map to visibility: hidden , thereby ensuring the map div has an actual size. 要在隐藏地图时更改视口，请将地图设置为visibility: hidden ，从而确保地图div具有实际大小。

---

#3楼

To extend the given answer with few useful tricks: 用一些有用的技巧来扩展给定的答案：

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)
}

UPDATE: 更新：
Further research in the topic show that fitBounds() is a asynchronic and it is best to make Zoom manipulation with a listener defined before calling Fit Bounds. 该主题的进一步研究表明，fitBounds（）是异步的，最好在调用Fit Bounds之前定义一个侦听器进行Zoom操作。
Thanks @Tim, @xr280xr, more examples on the topic : SO:setzoom-after-fitbounds 感谢@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);

---

#4楼

There is this MarkerClusterer client side utility available for google Map as specified here on Google Map developer Articles , here is brief on what's it's usage: 这个MarkerClusterer客户端实用程序可用于谷歌地图，如Google Map开发人员文章中所述 ，这里简要介绍它的用法：

There are many approaches for doing what you asked for: 有很多方法可以满足您的要求：

• Grid based clustering 基于网格的聚类
• Distance based clustering 基于距离的聚类
• Viewport Marker Management 视口标记管理
• Fusion Tables 融合表
• Marker Clusterer Marker Clusterer
• MarkerManager MarkerManager

You can read about them on the provided link above. 您可以在上面提供的链接上阅读它们。

Marker Clusterer uses Grid Based Clustering to cluster all the marker wishing the grid. Marker Clusterer使用基于网格的聚类来聚集所有希望网格的标记。 Grid-based clustering works by dividing the map into squares of a certain size (the size changes at each zoom) and then grouping the markers into each grid square. 基于网格的聚类通过将地图划分为特定大小的正方形（每个缩放处的大小更改）然后将标记分组到每个网格方块来工作。

Before Clustering 在聚类之前

After Clustering 聚类后

I hope this is what you were looking for & this will solve your problem :) 我希望这是你正在寻找的，这将解决你的问题:)

---

#5楼

The size of array must be greater than zero. 数组的大小必须大于零。 Οtherwise you will have unexpected results. 否则你会有意想不到的结果。

function zoomeExtends(){
  var bounds = new google.maps.LatLngBounds();
  if (markers.length>0) { 
      for (var i = 0; i < markers.length; i++) {
         bounds.extend(markers[i].getPosition());
        }    
        myMap.fitBounds(bounds);
    }
}