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

Tru*_*der 40 javascript google-maps google-maps-api-3 google-maps-markers

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

Sal*_*n A 80

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

  • 顺便说一句:当对标记数组进行操作时,您可以使用`getPosition()`方法获得标记的位置. (2认同)

Red*_*ing 24

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

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

地图上的标记建筑工选项将在新的市场对象与地图关联起来.

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