自动调整缩放以适应谷歌地图中的所有标记

Posted 2023-02-23

【中文标题】自动调整缩放以适应谷歌地图中的所有标记

【英文标题】：Automatically adjust zoom to accommodate all marker in a google map

【发布时间】：2011-04-23 07:15:02

【问题描述】：

使用最新版本的 Google 地图。如何使用经纬度添加标记并使用 javascript 自动调整地图的缩放级别以包含所有标记？

【参考方案1】：

Google Maps API v3 提供了一个 LatLngBounds 对象，您可以向其中添加多个 LatLng 对象。然后，您可以将其传递给Map.fitBounds() 函数，如下所述：

Zoom-To-Fit All Markers, Polylines or Polygons on A Google Map - API v2 Zoom-to-Fit All Markers on Google Map v3

部分示例

var latlng = [
    new google.maps.LatLng(1.23, 4.56),
    new google.maps.LatLng(7.89, 1.01),
    // ...
]; 
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) 
    latlngbounds.extend(latlng[i]);

map.fitBounds(latlngbounds);

【讨论】：

顺便说一句：对标记数组进行操作时，您可以使用getPosition() 方法获取标记的位置。

【参考方案2】：

您可以通过为每个纬度/经度对实例化一个 marker 对象来为您的谷歌地图添加标记：

var marker = new google.maps.Marker(
    position: currentLatLng, 
    map: map,
    title:"Title!"
); 

标记构造器上的map 选项会将新市场对象与您的地图相关联。

要缩放地图以包含新标记，请在 map 对象上使用 fitBounds 方法。 fitBounds 将latLngBounds 对象作为参数。这个对象有一个方便的 extend 方法，它将调整边界以包含新的纬度/经度。因此，您只需要遍历所有点，在单个 latLngBounds 对象上调用 extend。这将扩展范围以包括所有标记。完成此操作后，将此对象传递给 map 上的 fitBounds 方法，它将缩放以显示所有新标记。

【讨论】：

虽然您提供了正确的答案first.. 像往常一样，大部分分数都指向了实际上有一些示例代码的另一个same 答案。 .

@abbood 感谢您的提示；）

【参考方案3】：

以下内容对我有用

map.fitBounds(bounds);


 // add a zoom to the map


var listener = google.maps.event.addListener(map, 'idle', function()
        
          if(map.getZoom() > 16)
            map.setZoom(17);
          google.maps.event.removeListener(listener);
        );

在 setZoom() 方法中设置您想要的缩放。值越大，位置细节显示越宽，值越小，位置细节会节流和缩小