Apakah yang perlu saya lakukan jika vue melaporkan ralat semasa menggerakkan tetikus ke dalam dan keluar dari peta Baidu?

Baru-baru ini saya menghadapi masalah dalam projek pembangunan menggunakan Vue Apabila menggunakan Peta Baidu, ralat berlaku apabila tetikus dialihkan masuk dan keluar. Proses penyelesaiannya agak berliku-liku Sekarang saya akan kongsikan penyelesaian lengkapnya.

Pertama, mari kita lihat manifestasi khusus masalah itu.

Dalam komponen Vue, gunakan pemalam peta Baidu (BaiduMapApi_Load) dan lukis berbilang tindanan (Tindan) pada peta melalui JavaScript. Apabila tetikus bergerak ke dalam tindanan, ralat berlaku dalam acara tetikus yang disuntik. Mesej ralat berbunyi "Tidak boleh membaca 'piksel' sifat yang tidak ditentukan".

Selepas menyemak kod, kami mendapati bahawa kod ralat ialah:

var point = e.overlay.pixel,

Maksudnya, dalam kenyataan ini, e.overlay.pixel tidak boleh dikenali.

Kemudian saya menyemak dokumen dan kod sumber yang berkaitan, dan mendapati e.overlay.pixel tidak diterangkan secara terperinci dalam dokumen Peta Baidu yang rasmi, saya hanya boleh membuat spekulasi daripada pelaksanaan kod.

Selepas banyak percubaan, saya mendapati bahawa hanya jika Overlay mewarisi kelas BMap.Overlay, elemen DOM Overlay semasa boleh diperoleh melalui e.overlay._div. Walau bagaimanapun, menggunakan e.overlay._div masih tidak boleh mendapatkan maklumat kedudukan Overlay semasa, iaitu, nilai e.overlay.pixel tidak ditentukan.

Dalam kes ini, kita perlu menyelesaikan masalah itu sendiri. Selepas siasatan lanjut, kami akhirnya mendapati bahawa masalahnya terletak pada peristiwa interaksi antara peta dan Overlay.

Kaedah pemesejan yang dilaksanakan oleh pemalam peta Baidu (BaiduMapApi_Load) yang kami gunakan adalah berbeza daripada API peta rasmi. Dalam pemalam kami, maklumat Tindanan yang berkaitan dalam peta dikeluarkan melalui acara Vue Bus. Walau bagaimanapun, ini akan menjejaskan hubungan merapatkan antara e.overlay dan BMap, yang membawa kepada masalah sebelumnya.

Untuk menyelesaikan masalah ini, kami perlu menambah baik pemesejan. Kaedah khusus adalah seperti berikut:

1. Apabila Overlay dimuatkan, panggil kaedah $emit komponen Vue untuk menghantar maklumat Overlay dalam bentuk acara
2. Dengar peristiwa dalam komponen peta dan Hantar Tindanan disimpan dalam tatasusunan dalam contoh Vue
3. Dalam acara pergerakan tetikus, gunakan Vue Bus sekali lagi untuk menghantar ID Tindanan
4. Dalam pernyataan yang memerlukan penggunaan maklumat kedudukan Tindanan, Dapatkan Tindanan yang sepadan daripada tatasusunan, dan dapatkan longitud dan latitud yang sepadan melalui kaedah getProjection prototaip BMap.Overlay
5. Akhir sekali, gunakan kaedah pointToPixel bagi Kelas BMap.Map untuk menukar longitud dan latitud yang diperolehi kepada koordinat pada peta, Kemudian simpannya dalam e.overlay.pixel.

Pada ketika ini, masalah telah diselesaikan dengan sempurna.

Ringkasnya, punca masalah ini terletak pada susunan penyampaian mesej. Apabila membangun dengan Vue, kita perlu memberi perhatian khusus kepada pengedaran dan urutan mendengar acara untuk mengelakkan masalah sedemikian. Di samping itu, apabila menggunakan pemalam peta Baidu, adalah disyorkan untuk menggunakan kaedah pemesejan API rasmi, jika tidak masalah yang sama mungkin berlaku.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika vue melaporkan ralat semasa menggerakkan tetikus ke dalam dan keluar dari peta Baidu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!