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

Tri*_*shi 333 javascript google-maps-api-3

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

可用的方法如下

setZoom(zoom:number)

setCenter(latlng:LatLng)

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

在此输入图像描述

Ada*_*dam 654

您需要使用该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);
Run Code Online (Sandbox Code Playgroud)

参考:

  • 就像那里的新手一样,和Pratheep一样的问题......如果你对Maps API有经验,你就会知道这一点,但是你总是可以传入一个`LatLngLiteral`而不是一个Marker实例.例如,`bounds.extend({lat:123,lng:456})`. (8认同)
  • @Pratheep - 它是google.maps.Marker类的一部分; https://developers.google.com/maps/documentation/javascript/reference#Marker (6认同)
  • `getPosition`方法从何而来? (3认同)
  • 任何有兴趣的人的额外提示。您可以使用“fitBounds(bounds, int)”来定义填充,这将允许您在标记和地图边缘之间留出一点空间(如果需要,可以减少空间)。[查看文档](https://developers.google.com/maps/documentation/javascript/reference/map#Map.fitBounds) (3认同)

d.r*_*aev 170

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

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)
}
Run Code Online (Sandbox Code Playgroud)

更新:
该主题的进一步研究表明,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);
Run Code Online (Sandbox Code Playgroud)

  • 好的补充.谢谢! (4认同)

iyo*_*shi 6

这个MarkerClusterer客户端实用程序可用于谷歌地图,如谷歌地图开发人员文章中所述,这里简要说明它的用途:

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

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

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

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

在聚类之前 在聚类之前

聚类后 聚类后

我希望这是你正在寻找的,这将解决你的问题:)


Fot*_*lou 6

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

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);
    }
}
Run Code Online (Sandbox Code Playgroud)