Perché il centraggio della mia mappa è disattivato nella mia applicazione jQuery Mobile/Google Maps API3?

Ho una mappa powered by Google Maps Javascript API3 nella mia applicazione web jQuery Mobile. Ho aggiunto un cerchio con bordi neri su di esso.Perché il centraggio della mia mappa è disattivato nella mia applicazione jQuery Mobile/Google Maps API3?

Se si accede direttamente a questa pagina della mia app con la mappa, la mappa è centrata correttamente al centro del cerchio.

http://goo.gl/XvLST

enter image description here

Se si va a questa home page del mio app prima (http://goo.gl/0IWgE) e quindi fare clic la tua strada verso la pagina con la mappa, la mappa è

centrato erroneamente (la mappa dovrebbe essere centrata al centro del cerchio).
manca un'intera area coperta in grigio.

enter image description here

Perché è la mappa che sbaglia quando si fa clic nella pagina con la mappa dalla mia home page, ma funziona correttamente se mi visita la pagina con la mappa direttamente?

Non ho potuto semplicemente utilizzare Ajax per caricare la pagina della mappa con data-ajax='false'. Tuttavia, non posso farlo perché un'applicazione mobile non consente carichi non Ajax.

google.maps.event.trigger(map, 'resize') sembra riposizionare la mappa quando la accedo alla console di Chrome Web Developer, ma non sono sicuro di dove chiamarla nel mio javascript.

fonte

2012-03-19 dangerChihuahua007

Non vedo nulla qui http://dl.dropbox.com/u/1531353/CS164/mockups/map%20askew/index.html, puoi dare una schermata come quando è mal allineata – defau1t

Se clicca sul link in quella pagina, dovresti vedere una mappa che è mal centrata. Stranamente, il link è centrato correttamente se visiti direttamente http://goo.gl/XvLST. – dangerChihuahua007

Ho aggiunto degli screenshot nel caso in cui aiutasse a chiarire il mio problema. Grazie. – dangerChihuahua007

Poiché la pagina viene caricata correttamente tramite ajax (quando proviene dall'indice), l'evento della pagina che si sta utilizzando viene probabilmente chiamato prima che il DOM sia completamente pronto. GMaps si aspetta che la pagina sia pronta.

Provare a utilizzare un evento diverso diverso da pageinit. Sembra che pageshow possa essere valido (dato che viene eseguito dopo che un'animazione è terminata) http://jquerymobile.com/demos/1.0/docs/api/events.html

O forse potresti mettere la chiamata all'evento di ridimensionamento delle mappe, in un evento pagehow.

fonte

2012-03-22 15:24:43 barryhunter

Grazie, lo proverò appena possibile. Solo curioso, c'è un modo sistematico per visualizzare tutti gli eventi attivati per un elemento specifico in una pagina? – dangerChihuahua007

Non che io sappia. Avrebbe bisogno di ascoltare tutti gli eventi e registrarli. Ma è necessario conoscere tutti gli eventi che esistono per farlo funzionare :) – barryhunter

Yup cambiando 'pageinit' in 'pageshow' sulla tua pagina ha funzionato per me. – codaniel

La pagina si sta ricaricando tra la pagina iniziale e la mappa? In caso contrario, e se si sta creando o ridimensionando un div, è necessario chiamare google.maps.event.trigger(map, 'resize') dopo le modifiche div (cambio di dimensione o rimozione di un display: nessuno). (modificato per mostrare il codice per attivare l'evento, grazie a @Heitor Chang)

fonte

2012-03-19 20:17:27

Grazie, ma sto ricevendo questo errore con 'map.resize()' quando lo chiamo: 'Uncaught TypeError: Object # non ha alcun metodo 'resize''. Il riferimento API3 di Google Maps inoltre non menziona un metodo 'resize()' associato ad un oggetto Map. http://goo.gl/ORciv – dangerChihuahua007

Prova google.maps.event.trigger (mappa, 'ridimensiona')? È sotto "eventi" di google.maps.Map nell'API ref –

Grazie, in quale delle mie funzioni pensi che dovrei chiamarlo? Ho provato a chiamarlo in 'addCircle()' senza alcun risultato. – dangerChihuahua007

chiamata google.maps.event.trigger(mapObj, "resize"); su pageshow o pagechange

fonte

2012-10-14 21:23:41

Nel mio caso, la mia soluzione è $('#mapdiv').trigger('create'); lavorando bene. ma in altri casi non so che funzioni.

fonte

2016-06-12 15:32:19 Kumquat601

Perché il centraggio della mia mappa è disattivato nella mia applicazione jQuery Mobile/Google Maps API3?

risposta

Problemi correlati