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

4 回答

• 154

  您需要使用 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);
  

  Reference：

  回复于 2024-04-28T14:19:33+08:00
• 6

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

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

  回复于 2024-04-28T14:19:33+08:00
• 3

  这个 MarkerClusterer 客户端实用程序可用于谷歌 Map ，如Google Map developer Articles中所述，这里简要介绍_807484的用法：

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

  • 基于网格的群集

  • 基于距离的群集

  • 视口标记管理

  • Fusion Tables

  • Marker Clusterer

  • MarkerManager

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

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

  集群之前
  

  集群后
  

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

  回复于 2024-04-28T14:19:33+08:00
• 586

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

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

  回复于 2024-04-28T14:19:33+08:00