Question

我有一堆或多个标记，我想只显示包含它们的区域。我找到了一长串相似的问题（请参阅帖子底部的部分内容），但没有一个解决方案适合我。 LatLngBounds是正确构建的，但是当我调用fitBounds时，结果如下： after calling fitBounds() 代替： what should be 任何人都可以在我的代码中发现明显的错误吗？

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

Answer 1

解决了（尽管不是很好）。我最终做的是在加载页面时使用点初始化LatLngBounds，但仅在显示地图时进行平移和缩放。这样它就能正常工作。 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);
  }
}

然后，稍后（点击按钮）

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

它有效，但我不喜欢让那个全局变量挂起来。我使用OpenLayers实现完全相同的行为，它可以正常工作，而不需要这个hack。如果有人有更好的解决方案，请发布，如果有效，我会接受。

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

Answer 2

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

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

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

Answer 4

同样的问题，发现原因是我在调用display: none;之前隐藏了地图（使地图成为fitbounds()的容器）

Answer 5

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

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

addListenerOnce函数无需调用google.maps.event.removeListener(listener);。然后在侦听器内部调用map.fitBounds(bounds)，我们就可以使用计算出的边界的缩放级别。

fitBounds（）显示整个地球（如果地图首先隐藏然后显示）

5 个答案: