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


352

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

可用的方法如下

setZoom(zoom:number)

setCenter(latlng:LatLng)

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

在此处输入图片说明



您需要在每次添加标记并将地图设置为适合最终范围时将添加latlng到一个bounds对象。看到这里的答案:stackoverflow.com/questions/1556921/...
苏维Vignarajah

Answers:


678

您需要使用该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]

返回值:

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


3
getPosition方法从何而来?
Pratheep '16

6
@Pratheep-它是google.maps.Marker类的一部分;developers.google.com/maps/documentation/javascript/…–
亚当

像魅力一样工作!谢谢
约瑟夫N.17年

9
与新手一样,还有与Pratheep相同的问题……如果您对Maps API经验丰富,就知道这一点,但是您可以始终传递一个LatLngLiteral而不是Marker实例。例如bounds.extend({lat: 123, lng: 456})
凯尔·贝克

1
给有兴趣的人的额外提示。您可以使用定义填充,fitBounds(bounds, int)这样可以使标记和地图边缘之间的空间很小(如果需要,也可以减少空间)。参见文档
米克尔森·

178

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

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

4
很好的补充。谢谢!
paneer_tikka 2015年

1
我正在通过.getZoom()返回未定义。这个答案通过addListenerOncezoom_changed初始化其值后使用on 设置缩放来帮助我解决它。
xr280xr

1
感谢@ d.raev,但是在已经设置边界时设置最大缩放不起作用。您必须做的是在初始化地图时设置“ maxZoom”选项。developers.google.com/maps/documentation/javascript/...
蒂姆·

1
在有关缩放操作(UPDATE)的部分中,您将混合使用两个变量和范围。您可以使用yourMapmapthis。使其更一致可能是个好主意。
Gustavo Straube

11

数组的大小必须大于零。另外,您将得到意想不到的结果。

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

8

MarkerClusterer正如Google Map开发人员Articles此处指定的那样,有一个可用于google Map的客户端实用程序,这里简要说明其用途:

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

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

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

Marker Clusterer使用基于网格的聚类对希望创建网格的所有标记进行聚类。基于网格的聚类通过将地图划分为一定大小的正方形(大小随每次缩放而变化),然后将标记分组到每个网格正方形中来工作。

聚类之前 聚类之前

聚类后 聚类后

我希望这是您正在寻找的东西,它将解决您的问题:)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.