AngularJS: mappa tramite API di Google Maps v3 in una scheda

Sto tentando di creare una pagina con schede (utilizzando AngularJS). C'è una mappa (API di Google Maps v3) in una di quelle schede. Quando la mappa è nella scheda in primo piano, tutto sembra essere OK. Ma quando la mappa viene caricata nella scheda dello sfondo e visibile solo dopo aver fatto clic sulla scheda, la mappa viene posizionata in modo errato/tagliata e quando si tenta di manipolarla, la funzionalità sembra essere interrotta.AngularJS: mappa tramite API di Google Maps v3 in una scheda

Ho cercato di soluzioni e ho trovato quei trucchi con

google.maps.event.trigger(map, 'resize'); 
map.setCenter(center);

ma non sta funzionando. Potresti dare un'occhiata a http://jsfiddle.net/n4q7Y/5/ e dirmi cosa mi sono perso?

Grazie.

fonte

2013-01-21 honzzz

Aspetta un attimo prima di attivare la resize -Event: http://jsfiddle.net/doktormolle/aAeZw/

fonte

2013-01-21 18:51:28

bello, grazie :-) Questo violino aggiornato con la vostra idea anche carica il marcatore: http://jsfiddle.net/honzzz/n4q7Y/22/ – honzzz

Dr .Molle, qualche idea del perché questo è necessario? Sembra un hack solo per aggirare un difetto con il modulo Maps che si traduce in due '$ scope. $ Apply's nello stesso momento ... Che dovrebbe quindi essere corretto nel modulo piuttosto che con un timeout. –

I Immagino che il problema sia il fatto che le modifiche sulla proprietà selezionata vengono osservate da 2 parti (forzate da '$ scope. $ watch' e 2. da' ng-show'), ma non c'è modo di controllare l'ordine della chiamata degli ascoltatori, perché sono chiamati in modo asincrono. Una soluzione migliore potrebbe essere quella di impostare un'altra proprietà che indica che la mappa verrà mostrata e guardare questa proprietà per attivare l'evento di ridimensionamento per la mappa: http://jsfiddle.net/doktormolle/6WxtE/ –

grazie Dr.Molle, se riesco a migliorare un po ', nel mio caso un $ timeout immediatamente fare il lavoro perfettamente (come andando attendere la fine del ciclo di $ digerire)

$timeout(function() { 
    // in my case 
    initializeMap(); 
    // OR this case: 
    google.maps.event.trigger(map, 'resize');      
}, 1000); // with or without delay

fonte

2015-04-01 01:53:43

Ehi @Zeev G, non funziona senza il ritardo? $ timeout senza ritardo è un trucco per aspettare che l'angolare sia pronto.(Ma è possibile che Google Map venga caricato in modo asincrono in modo che possa essere più lento di quello angolare) –

è il mio codice che non ha funzionato senza i 1000 mil –

AngularJS: mappa tramite API di Google Maps v3 in una scheda

risposta

Problemi correlati