谷歌地图API V3方法fitBounds()

max*_*elo 67 javascript google-maps google-maps-api-3

我有这个渲染地图的代码.

function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(45.4555729, 9.169236),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,

panControl: true,
mapTypeControl: false,
panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.RIGHT_CENTER
},
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: {
    position: google.maps.ControlPosition.RIGHT_CENTER
            }
        };
    var map = new google.maps.Map(document.getElementById("mapCanvas"),
        myOptions);



var Item_1 = new google.maps.LatLng(45.5983128 ,8.9172776);

var myPlace = new google.maps.LatLng(45.4555729, 9.169236);

var marker = new google.maps.Marker({
    position: Item_1, 
    map: map});

var marker = new google.maps.Marker({
    position: myPlace, 
    map: map});

var bounds = new google.maps.LatLngBounds(myPlace, Item_1);
map.fitBounds(bounds);

    }
Run Code Online (Sandbox Code Playgroud)

即使这两个点与25公里分开,我也得到了这个结果:

在此输入图像描述

虽然我想渲染更高级别的缩放.

像这样

在此输入图像描述

我用的方法是fitBounds()

    var bounds = new google.maps.LatLngBounds(myPlace, Item_1);
    map.fitBounds(bounds);
Run Code Online (Sandbox Code Playgroud)

感谢您的支持

Gab*_*oli 142

这是因为LatLngBounds()不需要两个任意点作为参数,而是SW和NE点

.extend()在空边界对象上使用该方法

var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
map.fitBounds(bounds);
Run Code Online (Sandbox Code Playgroud)

演示http://jsfiddle.net/gaby/22qte/


And*_*ach 29

LatLngBounds必须用(西南,东北)顺序的点来定义.你的积分不是那个顺序.

一般修复,特别是如果你不知道这些点肯定会按顺序,是扩展一个空边界:

var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
map.fitBounds(bounds);
Run Code Online (Sandbox Code Playgroud)

API将整理边界.

  • 哈!刚被打败了.iPad键盘不易快速打字. (8认同)

van*_*ome 22

我有同样的问题,你描述虽然我正在建立我的LatLngBounds,如上所述.问题是事情是异步的,并且map.fitBounds()在错误的时间调用可能会给你留下像Q中那样的结果.我找到的最好的方法是将调用置于这样的空闲处理程序中:

google.maps.event.addListenerOnce(map, 'idle', function() {
    map.fitBounds(markerBounds);
});
Run Code Online (Sandbox Code Playgroud)

  • 我遇到了类似的问题,因为在调用 `fitBounds()` 时还没有显示包含的 HTML,所以显然缩放无法解决。在尝试缩放地图之前确保首先显示地图对我有帮助。 (2认同)

Mou*_*SSI 6

 var map = new google.maps.Map(document.getElementById("map"),{
                mapTypeId: google.maps.MapTypeId.ROADMAP

            });
var bounds = new google.maps.LatLngBounds();

for (i = 0; i < locations.length; i++){
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
bounds.extend(marker.position);
}
map.fitBounds(bounds);
Run Code Online (Sandbox Code Playgroud)

  • 酷对我有用.谢谢@MAMASSi (2认同)