Google maps 谷歌地图-缩放到合适的位置'；地图不为'时不起作用；看不见

我正在使用谷歌地图API v2。我向地图添加标记，然后缩放以适应这些标记。如果地图是可见的，我就这样做。但是如果没有-例如，如果我有一个tabstrip，并且当页面加载时地图的选项卡没有被选中-那么当我显示地图时，缩放级别和中心是错误的

下面是一个简单的测试用例（使用jQuery）：

var scale=Math.random（）*20；
$（文档）.ready（函数（）{
var$container=$（“#container”）；
//$container.hide（）；
var map=新的GMap2（$（'#map'）[0]）；
$container.show（）；
var markerBounds=新的GLatLngBounds（）；
对于（变量i=0；i<10；i++）{
var randomPoint=新GLatLng（38.935394+（数学随机（）-0.5）*标度，-77.061382+（数学随机（）-0.5）*标度）；
map.addOverlay（新的GMarker（随机点））；
扩展标记边界（随机点）；
}
setCenter（markerBounds.getCenter（），map.getBoundsZoomLevel（markerBounds））；
});

这可以正常工作，但如果您取消注释

$container.hide（）

，则所有内容都会被破坏

---

有没有办法让Google Maps API在不可见的div上正常工作？

您需要做的就是先创建

GMaps2（）

。然后可以

hide（）

容器，添加点，获取

getBoundsZoomLevel（）

，

show（）

请尝试以下操作：

$(document).ready(function() {
   var $container = $('#container');

   // First create the Map.
   var map = new GMap2($('#map')[0]);

   // The container can be hidden immediately afterwards.
   $container.hide();

   // Now you can do whatever you like!
   var markerBounds = new GLatLngBounds();
   for (var i = 0; i < 10; i++) {
      var randomPoint = new GLatLng( 38.935394 + (Math.random() - 0.5) * scale, 
                                    -77.061382 + (Math.random() - 0.5) * scale);
      map.addOverlay(new GMarker(randomPoint));
      markerBounds.extend(randomPoint);
   }
   map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));

   // Finally unhide the container.
   $container.show();
});

$（文档）.ready（函数（）{
var$container=$（“#container”）；
//首先创建地图。
var map=新的GMap2（$（'#map'）[0]）；
//之后可以立即隐藏容器。
$container.hide（）；
//现在你可以做任何你喜欢的事了！
var markerBounds=新的GLatLngBounds（）；
对于（变量i=0；i<10；i++）{
var randomPoint=新GLatLng（38.935394+（Math.random（）-0.5）*标度，
-77.061382+（数学随机（）；
map.addOverlay（新的GMarker（随机点））；
扩展标记边界（随机点）；
}
setCenter（markerBounds.getCenter（），map.getBoundsZoomLevel（markerBounds））；
//最后打开容器的隐藏。
$container.show（）；
});

以下是我最后所做的，为了它的价值

            $(".TabPanel").watch("display,visibility", function() {
                $(".MapContainer", this).each(function() {
                    if ($(this).is(":visible") == true) {
                        $(this).zoomToFitMarkers();
                    };
                });
            });

这用于观察选项卡面板的可见性更改，然后重新应用缩放逻辑

为了完整起见，这里是我的
zoomToFitMarkers
扩展：

$.fn.zoomToFitMarkers = function() {
    var map = this[0];
    map.gmap.checkResize();
    map.bounds = new GLatLngBounds();
    if (!!map.gmap.getOverlays) {
        for (i = 0; i < map.gmap.getOverlays.length; i++) {
            map.bounds.extend(map.gmap.getOverlays[i].getLatLng());
        }
        if (map.bounds && !map.bounds.isEmpty()) {
            var zoomLevel = map.gmap.getBoundsZoomLevel(map.bounds);
            zoomLevel = zoomLevel > 9 ? 9 : zoomLevel;
            zoomLevel = zoomLevel < 2 ? 2 : zoomLevel;
            map.gmap.setCenter(map.bounds.getCenter(), zoomLevel);
        }
    }
    map.gmap.checkResize();
};


每次将标记添加到地图时，它都会存储在一个数组中以供将来使用：

var marker = new GMarker(point);
map.gmap.addOverlay(marker);
// Keep track of new marker in getOverlays array
if (!map.gmap.getOverlays) map.gmap.getOverlays = new Array();
map.gmap.getOverlays.push(marker);


getBounds
（在getBoundsZoomLevel中调用）返回地图的可见区域，因此我假设您必须缩放以适应选项卡条的单击事件。v3中的方法摘要比v2中的描述要好：v3“返回当前视口的lat/lng边界。如果贴图尚未初始化（即贴图类型仍然为null），或者未设置“居中”和“缩放”，则结果为null。”我认为getBounds在不同版本之间没有太大变化。你是对的，这确实有效。不过，我的tabstrip的工作方式是在加载时隐藏所有内容（使用CSS），然后显示正确的选项卡。否则，会有一段短暂的时间，所有选项卡都可见。因此，如果可能的话，我想找到一种方法，在一个div上创建
GMap2
，而它仍然是隐藏的。@赫伯：不幸的是，在映射div设置为
display:none
的情况下，
GMap2
似乎没有正确创建。如果你在谷歌上搜索“getBoundsZoomLevel返回0”，你会发现一些相关的故事。我认为你最好的办法是解决这个问题，通过调整标签的工作方式。。。我不知道这是否有帮助，但是如果你用
$container.css（'visibility'，'hidden'）隐藏地图
，之后可以调用
GMap2（）
，当您使用
$container.css（'visibility'，'visible'）恢复可见性时，它可以正常工作。谢谢。这很有帮助。
display:none
vs
visibility:hidden
的区别很有意思——这不是我以前真正理解的。使用visibility属性隐藏选项卡是行不通的，因为具有
visibility:hidden
的项目仍然会占用页面空间。
var map= $("div#MapTarget")[0];
map.gmap = new google.maps.Map2(map);

var marker = new GMarker(point);
map.gmap.addOverlay(marker);
// Keep track of new marker in getOverlays array
if (!map.gmap.getOverlays) map.gmap.getOverlays = new Array();
map.gmap.getOverlays.push(marker);