fitBounds()显示整个地球(如果先隐藏地图然后显示) [英] fitBounds() shows whole earth (if map is first hidden and then shown)

问题描述

我有一堆或标记，我只想显示包含它们的区域.我发现了一长串类似的问题(有关某些问题，请参见文章底部)，但是没有一种解决方案适合我. LatLngBounds构建正确，但是当我调用fitBounds时，结果如下: 之后 代替: 有人可以在我的代码中发现明显的错误吗?

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

我阅读并尝试过的一些帖子(列表不全面):

Some of the posts I read and tried (list not comprehensive):

• Google Maps v3-自动化缩放级别?
• Google地图V3自定义标记图像和fitBounds()
• 带有fitBounds的Google地图不会缩放
Google Maps API V3中的
• fitbounds()不适合边界

• Google Maps v3 - Automating Zoom Level?
• Google maps V3 custom marker images and fitBounds()
• Google Maps with fitBounds don't zoom
• fitbounds() in Google maps api V3 does not fit bounds

---

编辑:如果(首先在地图中)隐藏了地图(仅在以后显示)，则实际上会发生这种情况. 我以这种方式将其隐藏:

---

Edit: this actually happens if (as I do in my application) the map is at first hidden, and showed only later. I hide it in this way:

$('#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');
});

关于这种情况发生的原因以及如何预防的线索(除了在首次显示时初始化地图)?

Any clue as to why this happens and how to prevent it (apart from initialising the map when first shown)?

在旁注中，如果我在声明地图对象时设置了缩放和居中(即我不使用fitBounds())，则即使隐藏/显示后，地图也能正确显示. 不过，我无法设置缩放和居中，因为点列表是在其他位置获取的，而且我不知道它们在哪里.

On a side note, if I set zoom and center when declaring the map object (i.e. I don't use fitBounds()) then the map will show correctly, even after a hide/show. I can't set zoom and center, though, because the list of points is retrieved elsewhere and I don't know where they are beforehand.

推荐答案

已解决(尽管不是很好). 我最终要做的是在加载页面时用点初始化LatLngBounds，但是仅在显示地图时平移和缩放.通过这种方式，它可以正常工作. 例如

Solved (not in a nice way, though). What I ended up doing was initialising the LatLngBounds with the points when loading the page, but panning and zooming only when showing the map. In this way it works correctly. E.g.

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

然后稍后(例如，单击一个按钮)

and then, later (click on a button for example)

function showMap(){
  $('#map').show(function(){
    google.maps.event.trigger(map, 'resize');
    map.fitBounds(box);
    map.panToBounds(box);
  });
}

它可以工作，但是我不喜欢让这个全局变量徘徊.我使用OpenLayers实现了完全相同的行为，并且无需此hack就可以正常工作.如果有人有更好的解决方案，请发布它，如果可行，我会接受.

It works, but I don't like to have that global var hanging around. I implement the exact same behavior using OpenLayers, and it works correctly without the need for this hack. If anybody has a better solution, please post it and I will accept it if it works.

感谢@Engineer和@Matt Handy帮助我消除了一种可能的错误来源.

Thanks to @Engineer and @Matt Handy for helping me eliminate one possible source of errors.

这篇关于fitBounds()显示整个地球(如果先隐藏地图然后显示)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！