Google Maps API v3 – getBounds ist nicht definiert

Question 1

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

Ich muss die Grenzen meiner Karte nach ihrer Initialisierung abrufen.

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

Also das warnt mich jetzt gMap.getBounds() ist nicht definiert.

Ich habe versucht, getBounds-Werte im Click-Ereignis zu erhalten, und es funktioniert gut für mich, aber ich kann nicht die gleichen Ergebnisse im Load Map-Ereignis erhalten.

Auch getBounds funktioniert gut, während das Dokument in Google Maps API v2 geladen wird, aber es schlägt in V3 fehl.

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

Question 2

In den frühen Tagen der v3-API war die getBounds() -Methode erforderte, dass die Kartenkacheln vollständig geladen waren, damit sie korrekte Ergebnisse lieferte. Aber jetzt scheint es, dass Sie zuhören können bounds_changed Ereignis, das noch vor dem gefeuert wird tilesloaded Veranstaltung:

<!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 laut der Dokumentation für getBounds(). Nichtsdestotrotz:

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, es funktioniert hier.

Question 4

Ich sagte, Salmans Lösung ist besser, weil die idle Ereignis wird früher aufgerufen als das tilesloaded one, da es darauf wartet, dass alle Kacheln geladen werden. Aber bei näherer Betrachtung scheint es so bounds_changed heißt schon früher und macht auch mehr sinn, da man ja die grenzen sucht, oder? 🙂

Also meine Lösung wäre:

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

Question 5

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

Das “bounds_changed”-Ereignis wird jedoch kontinuierlich ausgelöst, wenn Sie die Karte ziehen. Wenn Sie also dieses Ereignis verwenden möchten, um mit dem Laden von Markierungen zu beginnen, 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 gmaps.js Plugin:

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

Question 7

Hinzufügen einer Antwort für 2021.

Map.getBounds() kann anfangs undefiniert zurückgeben. Die bevorzugte Problemumgehung hierfür ist die Verwendung von bounds_changed Veranstaltung. Typischerweise tritt ein undefinierter Wert nur bei der Initialisierung der Karte auf und nie wieder.

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 12,
  center: new google.maps.LatLng(55.755327, 37.622166),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

map.addEventListener('bounds_changed', () => {
  console.log(map.getBounds());
});

https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed