【问题标题】:Automatically adjust zoom to accommodate all marker in a google map自动调整缩放以适应谷歌地图中的所有标记
【发布时间】:2011-04-23 07:15:02
【问题描述】:

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

【问题讨论】:

    标签: javascript google-maps google-maps-api-3 google-maps-markers


    【解决方案1】:

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

    部分示例

    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() 方法中设置您想要的缩放。值越大,位置细节显示越宽,值越小,位置细节会节流和缩小

    【讨论】:

      猜你喜欢
      • 2012-12-13
      • 1970-01-01
      • 2012-07-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-02-15
      • 2011-01-21
      相关资源
      最近更新 更多