fitBounds() 显示整个地球（如果地图先隐藏然后显示）答案

【问题标题】：fitBounds() shows whole earth (if map is first hidden and then shown)fitBounds() 显示整个地球（如果地图先隐藏然后显示）
【发布时间】：2012-06-21 08:36:18
【问题描述】：

我有一堆或标记，我只想显示包含它们的区域。我发现了一长串类似问题（请参阅帖子底部的一些问题），但没有一个解决方案适合我。 LatLngBounds 是正确构建的，但是当我调用 fitBounds 时，结果将如下所示：代替：有人能在我的代码中发现明显的错误吗？

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()），那么即使在隐藏/显示之后，地图也会正确显示。不过，我无法设置缩放和居中，因为点列表是在其他地方检索的，而我事先不知道它们在哪里。

【问题讨论】：

您的某些list[i] 元素可能是“无效的”。尝试调试，看看是否所有list[i] 元素都有'lat'、'lon' 属性，而那些不是null、undefined、NaN 等。
@Engineer 感谢您的评论，但元素都很好。附带说明一下，Firefox 13、Chrome 19 和 IE 9 会发生这种情况。
请提供您正在迭代的列表。这将使调试变得更加容易。

标签： javascript google-maps google-maps-api-3 fitbounds

【解决方案1】：

为了扩展@JayThakkar 的答案，这对我有用

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

addListenerOnce 函数消除了调用google.maps.event.removeListener(listener); 的需要。在监听器中调用map.fitBounds(bounds) 让我们使用计算出的边界的缩放级别。

【讨论】：

【解决方案2】：

同样的问题，找到原因是我在调用fitbounds()之前隐藏了地图（制作地图的容器display: none;）

【讨论】：

【解决方案3】：

根据您的需要修改

map.fitBounds(bounds);

var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 16) map.setZoom(16); 
  google.maps.event.removeListener(listener); 
});

【讨论】：

【解决方案4】：

解决了（虽然不是很好）。我最终做的是在加载页面时用点初始化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 帮助我消除了一种可能的错误来源。

【讨论】：

差不多一年后，我遇到了同样的问题！似乎在隐藏地图上调用fitBounds() 然后触发resize 事件会导致问题。如果我在地图可见时调用fitBounds() 触发事件，您的解决方案将按预期工作。干杯！
您对问题的描述与我遇到的类似问题相符，解决方案也是如此。感谢您将其固定下来！
此问题与使用引导选项卡在默认情况下不可见 UI 状态时遇到的问题几乎相同。当从隐藏状态扩展地图上的边界时，这就像一个冠军。

【解决方案5】：

我在fiddle 中尝试了您的代码，它按预期工作。

所以你的代码失败的原因必须在你的数据点的定义中（正如工程师已经建议的那样）。将您的列表定义与我的进行比较，并检查它们是否不同。

【讨论】：

我用我的数据试过你的小提琴，它可以工作。 :( 这一定意味着错误存在于代码中的其他地方。我将尝试将其剥离到最低限度，看看它从哪里开始工作。