Google Maps API v3: Gibt es einen Rückruf oder Ereignis-Listener für einen setMap () Ereignis?
-
27-09-2019 - |
Frage
Ich bin mit Google Maps API v3 auf einer Website, die ich entwickeln werde. Ich habe ein Dropdown-Feld unter meiner Karte, die den Benutzer zum Umschalten zwischen verschiedenen Sätzen von Markierungen kann auf der Karte angezeigt werden. Jeder Marker wird mit marker.setMap()
angezeigt.
Mein Problem ist, dass die Karte manchmal eine lange Zeit in Anspruch nimmt, den neuen Marker angezeigt werden, vor allem im Internet Explorer. Ich mag eine „Laden“ Animation zeigen, während die Kartenmarkierungen schalten. Aber ich weiß nicht, wie zu erkennen, wenn die Karte fertig ist die neue Anzeige von Daten (es gibt keine Seite zu laden, da diese alle AJAX ist). Gibt es einen Rückruf oder Ereignis-Listener für einen setMap()
Ereignis, so dass ich eine Funktion aufrufen können den „Laden“ Animation zu stoppen, wenn der letzte Marker fertig geladen hat?
Lösung
Es scheint nicht zu einem Rückruf oder Ereignis-Listener für setMap () zu sein, aber ich dachte, einen Ausweg zu erreichen, was ich wollte. Ich bin Laden der Google Map jQuery verwenden. Hier ist mein Code.
Wenn die Karte zu initialisieren, habe ich einen Listener für das ‚Leerlauf‘ Ereignis auf, das die „Laden“ Animation versteckt. Das ‚Leerlauf‘ Ereignis wird ausgelöst, wenn die Karte ist fertig Nachzug nach einem Scroll- oder Änderung vergrößern:
google.maps.event.addListener(this.map, 'idle', function() {
$('#loading').hide();
});
Und in meiner Funktion klar Overlays, ich die Ladeanimation zuerst zeigen, deaktivieren Sie dann jeden Marker setMap (null). Dann rezentrieren ich sehr leicht die Karte, indem Sie die Länge von 0,000000001 ändern. Dies geschieht, nachdem alle setMap () Anrufe und Auslöser des ‚Leerlauf‘ Ereignis, das die Lade Animation versteckt.
// clear overlays from the map
function clearOverlays() {
$('#loading').show();
// clear the markers from the active data array
if (activeData) {
for (i in activeData) { activeData[i].setMap(null); }
}
activeData = '';
// very slightly recenter the map to trigger the 'idle' event
var centerlat = MYMAP.map.getCenter().lat();
var centerlng = MYMAP.map.getCenter().lng() + .000000001;
recenter = new google.maps.LatLng(centerlat, centerlng);
MYMAP.map.setCenter(recenter);
}
Es ist ein bisschen wie ein Hack, aber ich hoffe, dass jemand anderes findet dies nützlich.
Andere Tipps
Vielleicht würde dies helfen: http://www.basicslabs.com/Projects/progressBar / # Beispiele
und das Beispiel: http://www.basicslabs.com/Projects /progressBar/example/progressBar.html