Google Maps Api v3 - getBounds ist undefiniert

Question 1

Ich wechsle von v2 zu v3 Google Maps API und habe ein Problem mit der gMap.getBounds()Funktion.

Ich muss die Grenzen meiner Karte nach ihrer Initialisierung ermitteln.

Hier ist mein Javascript-Code:


var gMap;
$(document).ready(

    function() {

        var latlng = new google.maps.LatLng(55.755327, 37.622166);
        var myOptions = {
            zoom: 12,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);

        alert(gMap.getBounds());
    }
);

Jetzt macht es mich darauf aufmerksam gMap.getBounds() es nicht definiert ist.

Ich habe versucht, getBounds-Werte im Klickereignis abzurufen, und es funktioniert gut für mich, aber ich kann im Ladekartenereignis nicht dieselben Ergebnisse erzielen.

GetBounds funktioniert auch einwandfrei, während das Dokument in Google Maps API v2 geladen wird, in V3 schlägt es jedoch fehl.

Könnten Sie mir bitte helfen, dieses Problem zu lösen?

Question 2

In den frühen Tagen der v3-API getBounds()mussten die Kartenkacheln vollständig geladen sein, damit sie korrekte Ergebnisse zurückgaben. Jetzt können Sie jedoch das bounds_changedEreignis anhören , das bereits vor dem tilesloadedEreignis ausgelöst wird :

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps v3 - getBounds is undefined</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 500px; height: 350px;"></div> 

   <script type="text/javascript"> 
      var map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: new google.maps.LatLng(55.755327, 37.622166),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      google.maps.event.addListener(map, 'bounds_changed', function() {
         alert(map.getBounds());
      });
   </script> 
</body> 
</html>

Question 3

Es sollte funktionieren, zumindest gemäß der Dokumentation für getBounds (). Dennoch:

var gMap;
$(document).ready(function() {
    var latlng = new google.maps.LatLng(55.755327, 37.622166);
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    gMap = new google.maps.Map(document.getElementById("GoogleMapControl"), myOptions);
    google.maps.event.addListenerOnce(gMap, 'idle', function(){
        alert(this.getBounds());
    });
});

Sehen Sie, wie es hier funktioniert .

Question 4

Ich habe gesagt, Salmans Lösung ist besser, weil das idleEreignis früher als das aufgerufen wird tilesloaded, da es darauf wartet, dass alle Kacheln geladen werden. Aber bei näherer Betrachtung scheint bounds_changedes noch früher aufgerufen zu werden und es macht auch mehr Sinn, da Sie nach den Grenzen suchen, oder? :) :)

Meine Lösung wäre also:

google.maps.event.addListenerOnce(gMap, 'bounds_changed', function(){
    alert(this.getBounds());
});

Question 5

In anderen Kommentaren hier wird empfohlen, das Ereignis "bounds_changed" anstelle von "idle" zu verwenden, dem ich zustimme. Sicherlich unter IE8, das auf meinem Entwicklungscomputer zumindest "idle" vor "bounds_changed" auslöst und mir auf getBounds einen Verweis auf null hinterlässt.

Das Ereignis "bounds_changed" wird jedoch kontinuierlich ausgelöst, wenn Sie die Karte ziehen. Wenn Sie dieses Ereignis zum Laden von Markern verwenden möchten, wird es Ihren Webserver stark belasten.

Meine Multi-Browser-Lösung für dieses Problem:

google.maps.event.addListenerOnce(gmap, "bounds_changed", function(){
   loadMyMarkers();
   google.maps.event.addListener(gmap, "idle", loadMyMarkers);
});

Question 6

Nun, ich bin mir nicht sicher, ob ich zu spät bin, aber hier ist meine Lösung mit dem Plugin gmaps.js :

map = new GMaps({...});

// bounds loaded? if not try again after 0.5 sec
var check_bounds = function(){

        var ok = true;

        if (map.getBounds() === undefined)
            ok = false;

        if (! ok) 
            setTimeout(check_bounds, 500);
        else {
             //ok to query bounds here
              var bounds = map.getBounds();
        }   
    }

    //call it
    check_bounds();