Frage Google Maps API v3 - getBounds ist nicht definiert


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

Ich muss die Grenzen meiner Karte nach ihrer Initialisierung bekommen.

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 warnt es mich gMap.getBounds() ist nicht definiert.

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

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

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


76
2018-05-14 07:59


Ursprung


Antworten:


In den frühen Tagen der v3 API, der getBounds() Methode erforderte das Laden der Kartenkacheln, damit die richtigen Ergebnisse zurückgegeben werden. Aber jetzt scheint es, dass Sie zuhören können bounds_changed Ereignis, das schon vor der 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>

122
2018-05-14 09:20



Es sollte zumindest gemäß der Dokumentation von getBounds () funktionieren. 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 funktioniert Hier.


20
2018-05-14 09:27



Ich sagte Salmans Lösung ist besser, weil die idle Ereignis wird früher als das aufgerufen tilesloaded eins, da es darauf wartet, dass alle Kacheln geladen werden. Aber bei näherem Hinsehen scheint es so bounds_changed heißt noch früher und es macht auch mehr Sinn, da du nach den Grenzen suchst, oder? :)

Also meine Lösung wäre:

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

14
2017-10-25 00:11



In anderen Kommentaren wird hier empfohlen, das "bounds_changed" -Ereignis über "idle" zu verwenden, was ich stimme. Sicherlich unter IE8, was zumindest "unlimited" vor "bounds_changed" auf meiner Dev-Maschine auslöst und mich mit einem Verweis auf null auf getBounds belässt.

Das Ereignis "bounds_changed" wird jedoch kontinuierlich ausgelöst, wenn Sie die Karte ziehen. Wenn Sie also dieses Ereignis verwenden möchten, um mit dem Laden von Markern zu beginnen, wird es auf Ihrem Webserver schwer werden.

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

10
2018-01-11 11:32



Nun, ich bin mir nicht sicher, ob ich zu spät bin, aber hier ist meine Lösung mit 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();

1
2017-10-22 19:19