9

我有一堆或标记，我只想显示包含它们的区域。我发现了一长串类似问题（请参阅帖子底部的一些问题），但没有一个解决方案适合我。LatLngBounds 是正确构建的，但是当我调用 fitBounds 时，结果将如下： 调用 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()），那么即使在隐藏/显示之后，地图也会正确显示。不过，我无法设置缩放和中心，因为点列表是在其他地方检索的，我事先不知道它们在哪里。

4

5 回答 5

13

解决了（虽然不是很好）。我最终做的是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 帮助我消除了一种可能的错误来源。

于 2012-06-22T09:30:25.383 回答
1

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

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

于 2012-06-19T13:34:09.723 回答
0

根据您的需要进行修改

map.fitBounds(bounds);

var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 16) map.setZoom(16); 
  google.maps.event.removeListener(listener); 
});
于 2012-06-19T12:58:24.233 回答
0

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

于 2019-03-14T18:14:41.933 回答
0

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

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

该addListenerOnce功能无需调用google.maps.event.removeListener(listener);. 在侦听器内部调用map.fitBounds(bounds)让我们使用计算出的边界的缩放级别。

于 2020-10-07T10:08:56.653 回答