Google Maps - Zoom zu markieren, funktioniert nicht, wenn die Karte nicht sichtbar ist

Question

Ich verwende die Google Maps API V2. Ich füge der Karte Marker hinzu und zoomen dann, um diese Marker anzupassen. Dies funktioniert gut, wenn die Karte sichtbar ist. Aber wenn nicht - beispielsweise, wenn ich einen TabStrip habe und die Registerkarte der Karte nicht ausgewählt wird, wenn die Seite geladen wird - dann sind die Zoomebene und die Mitte falsch, wenn ich die Karte anzeige, falsch.

Hier ist ein einfacher Testfall (verwendet 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>

Dies funktioniert gut so, wie es ist, aber wenn Sie sich anwenden $container.hide() Es ist alles ausgepeitscht.

Gibt es eine Möglichkeit, die Google Maps -API ordnungsgemäß auf einem DIV zu funktionieren, das nicht sichtbar ist?

Answer 1

Alles, was Sie tun müssen, ist, das zu erstellen GMaps2() vor allem anderen. Sie können dann hide() Der Container, fügen Sie die Punkte hinzu, erhalten Sie die getBoundsZoomLevel(), show() Es wieder und es sollte gut funktionieren.

Versuche Folgendes:

$(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();
});

Answer 2

Folgendes habe ich am Ende gemacht, was es wert ist.

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

Dies verwendet Rick Strahls Überwachungs -Plugin für JQuery Um das Registerkartenfeld für Sichtbarkeitsänderungen anzusehen, und dann die Zoomlogik erneut aufzeigen.

Zur Vollständigkeit hier ist mein zoomToFitMarkers Verlängerung:

$.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();
};

Dies beruht auf ein paar Kongressen:

1. Das GMAP2 -Objekt wird in gespeichert map.gmap, wo map ist das Zieldomelement:

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

2. Jedes Mal, wenn ein Marker zur Karte hinzugefügt wird, wird er in einem Array für zukünftige Verwendung gespeichert:

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