Domanda

Sto utilizzando Google Maps API v3 su un sito web che sto sviluppando. Ho un menu a tendina sotto la mia mappa che permette all'utente di passare tra diversi set di indicatori da visualizzare sulla mappa. Ogni indicatore viene visualizzato utilizzando marker.setMap().

Il mio problema è che la mappa a volte richiede molto tempo per visualizzare i nuovi marcatori, soprattutto in IE. Voglio mostrare un'animazione "Caricamento", mentre la mappa è il passaggio marcatori. Ma io non so come rilevare quando la mappa è terminata la visualizzazione i nuovi dati (non c'è di caricamento della pagina, dal momento che questo è tutto AJAX). Esiste un callback o listener di eventi per un evento setMap(), così posso chiamare una funzione per fermare l'animazione "Caricamento" quando l'ultimo marcatore ha finito di carico?

È stato utile?

Soluzione

Ci non sembra essere un callback o listener di eventi per setMap (), ma ho trovato un modo per realizzare ciò che volevo. Sto caricando la Google Map utilizzando jQuery. Qui è il mio codice.

Quando si inizializza la mappa, ho creato un listener per l'evento 'inattività', che nasconde l'animazione "caricamento". L'evento 'inattività' viene attivato ogni volta che la mappa è ridisegno finito, dopo un rotolo o diminuire il cambiamento:

google.maps.event.addListener(this.map, 'idle', function() {
 $('#loading').hide();
});

E nella mia funzione di sovrapposizioni chiare, mostro prima l'animazione di caricamento, quindi deselezionare ogni indicatore utilizzando setMap (null). Poi ho leggermente centrare nuovamente la mappa modificando la longitudine da ,000,000001 millions. Questo accade dopo tutto il setMap () chiamate e trigger l'evento 'inattività' che nasconde l'animazione di caricamento.

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

E 'un po' di un hack, ma spero che qualcun altro trova questo utile.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top