Google 地图 - 当地图不可见时，缩放以适合标记不起作用

Question

我正在使用 Google 地图 API v2。我向地图添加标记，然后缩放以适合这些标记。如果地图可见，则效果很好，我这样做。但如果不是 - 例如，如果我有一个选项卡条，并且在页面加载时未选择地图的选项卡 - 那么当我显示地图时，缩放级别和中心是错误的。

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

<script type="text/javascript">

    var scale = Math.random() * 20;

    $(document).ready(function() {
        var $container = $('#container');
        // $container.hide();
        var map = new GMap2($('#map')[0]);
        $container.show();
        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));
    });

</script>

<div id="container">
    <div id="map" style="margin: 100px; width: 450px; height: 300px;"></div>
</div>

这可以正常工作，但是如果您取消注释 $container.hide() ，它就会崩溃。

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

Answer 1

这就是我最终所做的事情，因为它是有价值的。

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

这使用 Rick Strahl 的 jQuery 监控插件 来监视选项卡面板可见性发生变化，然后重新应用缩放逻辑。

为了完整起见，这是我的 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();
};

这依赖于几个约定：

1. GMap2 对象存储在 map.gmap 中，其中 map 是目标 DOM 元素：

   var map= $("div#MapTarget")[0];
   map.gmap = new google.maps.Map2(地图);
   

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

   var 标记 = new GMarker(point);
   map.gmap.addOverlay(标记);
   // 跟踪 getOverlays 数组中的新标记
   if (!map.gmap.getOverlays) map.gmap.getOverlays = new Array();
   map.gmap.getOverlays.push(marker);
   

Answer 2

您需要做的就是先创建 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();
});