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

Center/Set Zoom of Map to cover all visible Markers?

提问by Trikaldarshi

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)

setZoom(zoom:number)

and

和

setCenter(latlng:LatLng)

setCenter(latlng:LatLng)

Neither setCentersupports multiple location or Location array input nor setZoomdoes have this type of functionality

既不setCenter支持多位置或位置数组输入，也setZoom没有这种类型的功能

回答by Adam

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

map.fitBounds(bounds);

---

---

Documentationfrom developers.google.com/maps/documentation/javascript:

来自developer.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 fitBoundsfunction reads the map's size as 0x0, and therefore does not do anything. To change the viewport while the map is hidden, set the map to visibility: hidden, thereby ensuring the map div has an actual size.

fitBounds(bounds[, padding])

参数：

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

返回值：无

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

回答by d.raev

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.
Thanks @Tim, @xr280xr, more examples on the topic : SO:setzoom-after-fitbounds

更新：
该主题的进一步研究表明 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);

回答by Fotis. Tsilfoglou

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

回答by iyogeshjoshi

There is this MarkerClustererclient side utility available for google Map as specified here on Google Map developer Articles, here is brief on what's it's usage:

MarkerClusterer谷歌地图开发人员文章中指定了此客户端实用程序可用于谷歌地图，这里简要介绍了它的用途：

There are many approaches for doing what you asked for:

有很多方法可以完成您的要求：

• Grid based clustering
• Distance based clustering
• Viewport Marker Management
• Fusion Tables
• Marker Clusterer
• MarkerManager

• 基于网格的聚类
• 基于距离的聚类
• 视口标记管理
• 融合表
• 标记聚类器
• 标记管理器

You can read about them on the provided link above.

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

Marker Clustereruses Grid Based Clusteringto cluster all the marker wishing the grid. 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.

Marker Clusterer使用基于网格的聚类来聚类所有希望网格的标记。基于网格的聚类的工作原理是将地图划分为特定大小的方块（每次缩放时大小都会发生变化），然后将标记分组到每个网格方块中。

Before Clustering

聚类前

After Clustering

聚类后

I hope this is what you were looking for & this will solve your problem :)

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