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

时间:2010-10-09 20:21:46

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

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

3 个答案:

答案 0 :(得分:77)

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

答案 1 :(得分:24)

您可以通过为每个纬度/经度对实例化marker对象来向Google地图添加标记:

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

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

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

答案 2 :(得分:0)

以下为我成功了

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()方法中设置所需的缩放比例。值越大,显示的位置细节越宽,值越小,它会限制和缩小位置细节