I have a bunch or markers, and I want to show only the area containing them. I found a long list of similar questions (see at the bottom of the post for some), but none of the solutions works for me. The LatLngBounds is built correctly, but when I call fitBounds the result will be the following:
Instead of:
Can anybody spot an evident error in my code?
var opt = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),opt);
var box = new google.maps.LatLngBounds();
for(var i=0;i<list.length;i++){
var p = new google.maps.LatLng(list[i].lat,list[i].lon);
var marker = new google.maps.Marker({
position: p,
map: map
});
box.extend(p);
}
map.fitBounds(box);
map.panToBounds(box);
我阅读和尝试过的一些帖子（列表不全面）：
$('#map').hide();
并显示它：
$('#map').show(function(){
//this is necessary because otherwise
//the map will show up in the upper left corner
//until a window resize takes place
google.maps.event.trigger(map, 'resize');
});
关于为什么会发生这种情况以及如何防止这种情况的任何线索（除了首次显示时初始化地图之外）？
顺便说一句，如果我在声明地图对象时设置缩放和居中（即我不使用fitBounds()）那么即使在隐藏/显示之后，地图也会正确显示。
不过，我无法设置缩放和居中，因为点列表是在其他地方检索的，而且我事先不知道它们在哪里。
解决了（虽然不是很好的方式）。
我最终做的是初始化LatLngBounds加载页面时使用点，但仅在显示地图时平移和缩放。这样就可以正常工作了。
例如。
var box;
function init(){
var opt = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),opt);
box = new google.maps.LatLngBounds();
for(var i=0;i<list.length;i++){
var p = new google.maps.LatLng(list[i].lat,list[i].lon);
var marker = new google.maps.Marker({
position: p,
map: map
});
box.extend(p);
}
}
然后，稍后（例如单击按钮）
function showMap(){
$('#map').show(function(){
google.maps.event.trigger(map, 'resize');
map.fitBounds(box);
map.panToBounds(box);
});
}
它有效，但我不喜欢让全局变量闲逛。我使用 OpenLayers 实现了完全相同的行为，并且它可以正常工作，而不需要这种 hack。如果有人有更好的解决方案，请发布，如果有效，我会接受。
感谢@Engineer 和@Matt Handy 帮助我消除了一个可能的错误来源。