Google Maps Api v3 - getBounds ist undefiniert

83

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?

javascript google-maps google-maps-api-3 Dolce Vita
quelle

Antworten:

136

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>
Daniel Vassallo
quelle
1
Genau das brauche ich! danke =). Es hat mein Problem gelöst.
DolceVita
das ist sehr nützlich für mich, ich habe fast 2 Stunden dafür verschwendet
arjuncc
Danke dir! Es hat mir sehr geholfen
user15
Dies kann auch nützlich sein stackoverflow.com/questions/832692/…
dav
1
Für das, was es wert ist, habe ich festgestellt, dass getBounds auf Android-Handys nach dem ersten Aufruf von bounds_changed nicht verfügbar ist , sondern nach nachfolgenden. Durch Ändern in "Kacheln geladen" wurde dies behoben (obwohl dies für einige hässliche Aktualisierungen sorgte).
Chris Rae
20

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 .

Salman A.
quelle
Dies sollte die akzeptierte Antwort sein. Leerlauf wird viel früher aufgerufen, als warten zu müssen, bis alle Kacheln geladen sind.
Treznik
@treznik: Wie haben Sie festgestellt, dass das idleEreignis vor dem tilesloadedEreignis ausgelöst wird ? Für mich wird die tilesloadedVeranstaltung ständig vor der idleVeranstaltung ausgelöst.
Daniel Vassallo
das ist genau das, wonach ich gesucht habe
arjuncc
Dies ist die bessere Lösung, wenn Sie die Funktion nur einmal ausführen müssen.
bbodenmiller
15

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());
});
treznik
quelle
1
Wenn diese Frage gestellt wurde, bounds_changedhätte es nicht funktioniert, da getBounds()die Kacheln geladen werden mussten. +1 für den Vorschlag. Ich werde meine Antwort aktualisieren.
Daniel Vassallo
11

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);
});
Almer
quelle
1
Dies ist die Methode, die ich aus den gleichen Gründen verwende :-)
oodavid
1

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