Pertanyaan Mengapa memusatkan peta saya di aplikasi jQuery Mobile / Google Maps API3 saya?


Saya memiliki peta yang didukung oleh Google Maps Javascript API3 di aplikasi web jQuery Mobile saya. Saya menambahkan lingkaran dengan batas hitam di atasnya.

Jika Anda membuka halaman aplikasi saya dengan peta secara langsung, peta dipusatkan dengan benar di pusat lingkaran.

http://goo.gl/XvLST

enter image description here

Jika Anda pergi ke halaman rumah ini dari aplikasi saya terlebih dahulu (http://goo.gl/0IWgE) dan kemudian klik jalan Anda ke halaman dengan peta, peta tersebut

  1. centered erringly (Peta harus dipusatkan di pusat lingkaran).
  2. hilang seluruh area tertutup abu-abu.

enter image description here

Mengapa peta itu salah ketika saya mengklik ke halaman dengan peta dari halaman rumah saya, tetapi bekerja dengan benar jika saya mengunjungi halaman dengan peta secara langsung?

Saya tidak bisa menggunakan Ajax untuk memuat halaman peta data-ajax='false'. Namun, saya tidak dapat benar-benar melakukan ini karena aplikasi seluler tidak memungkinkan untuk beban non-ajax.

google.maps.event.trigger(map, 'resize') tampaknya memposisikan ulang peta saat saya memasukkannya ke konsol Pengembang Web Chrome, tetapi saya tidak yakin di mana harus memanggilnya di javascript saya.


5
2018-03-19 19:42


asal


Jawaban:


Karena halaman ini dimuat secara paksa melalui ajax (ketika berasal dari indeks) - peristiwa halaman yang Anda gunakan mungkin dipanggil sebelum DOM benar-benar siap. GMap mengharapkan halaman tersebut siap.

Coba gunakan acara lain selain dari pageinit. Sepertinya pageshow mungkin bagus (berjalan setelah animasi selesai) http://jquerymobile.com/demos/1.0/docs/api/events.html

Atau mungkin Anda bisa melakukan panggilan ke acara mengubah ukuran peta, dalam acara pageshow.


7
2018-03-22 15:24



Apakah reload halaman antara halaman rumah dan peta? Jika tidak, dan jika Anda membuat atau mengubah ukuran div, Anda harus menelepon google.maps.event.trigger(map, 'resize') setelah perubahan div (ukuran berubah atau menghapus tampilan: tidak ada). (Diedit untuk menunjukkan kode untuk memicu acara, terima kasih kepada @Heitor Chang)


1
2018-03-19 20:17



Panggilan google.maps.event.trigger(mapObj, "resize"); di pageshow atau pagechange


0
2017-10-14 21:23



Dalam kasus saya, solusi saya adalah   $('#mapdiv').trigger('create'); bekerja dengan baik. tetapi dalam kasus lain saya tidak tahu itu berhasil.


0
2018-06-12 15:32