Google Maps API V3方法fitBounds()


70

我有渲染地图的代码。

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

    }

即使两点相距25 km,我也可以得到以下结果:

在此处输入图片说明

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

像这样

在此处输入图片说明

我使用fitBounds()方法

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

谢谢你的支持

Answers:


149

发生这种情况是因为LatLngBounds()没有将两个任意点作为参数,而是将SW和NE点作为参数

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

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

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


正确答案。需要将SW和NE点传递给扩展方法。但是,一旦地图完全加载,就应该调用fitBounds方法,如下文所述。您可能还希望像这样将padding = 0传递给fitBounds:map.fitBounds(markerBounds,0);
tala9999 '18

30

LatLngBounds必须以(西南,东北)顺序定义点。您的观点不按此顺序排列。

一般的解决方法是扩展一个空边界,特别是如果您不知道这些点肯定会按此顺序排列时:

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

API将整理边界。


10
哈哈!只是被殴打而已。iPad键盘不能使快速打字变得容易。
安德鲁·里奇

23

尽管我按照上面的建议构建了LatLngBounds,但我遇到的问题与您描述的相同。问题是事情是异步的,map.fitBounds()在错误的时间进行调用可能会给您带来类似于Q的结果。我发现的最佳方法是将调用放入如下所示的空闲处理程序中:

google.maps.event.addListenerOnce(map, 'idle', function() {
    map.fitBounds(markerBounds);
});

1
谢谢,这对我来说是一个巨大的帮助,因为我正在将地址地理编码为坐标,然后映射到这些坐标,但这
没用

2
我遇到了类似的问题,因为在调用时尚未显示包含HTML的内容fitBounds(),因此显然无法进行缩放。确保在尝试缩放地图之前先显示地图对我有帮助。
stevo

非常感谢,您救了我,这很好用,这个答案对我来说是正确的。
毛里西奥特立尼达

您是
救生员

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

对于我来说,我必须从更改bounds.extend(marker)bounds.extend(marker.position)。谢谢
krummens
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.