vue使用百度地圖鼠標(biāo)移入移除報錯如何解決

今天小編給大家分享一下vue使用百度地圖鼠標(biāo)移入移除報錯如何解決的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

首先，我們來看一下問題的具體表現(xiàn)。

在 Vue 組件中，使用百度地圖插件（BaiduMapApi_Load），并通過 JavaScript 實現(xiàn)了在地圖上繪制多個覆蓋物（Overlay）。當(dāng)鼠標(biāo)移入覆蓋物時，注入的鼠標(biāo)事件中出現(xiàn)了報錯。錯誤信息顯示為“Cannot read property 'pixel' of undefined”。

經(jīng)過對代碼進(jìn)行排查，發(fā)現(xiàn)報錯的代碼是：

var point = e.overlay.pixel,

也就是說，在該語句中，e.overlay.pixel 出現(xiàn)了無法識別的情況。

接著查看了相關(guān)文檔及源代碼，發(fā)現(xiàn)此處 e.overlay.pixel 在百度地圖官方文檔并沒有作出詳細(xì)說明，只能從代碼實現(xiàn)上來推測。

經(jīng)過多次嘗試，發(fā)現(xiàn)只有在 Overlay 繼承了 BMap.Overlay 類，才可以通過 e.overlay._div 來獲取當(dāng)前 Overlay 的 DOM 元素。但是使用 e.overlay._div 仍然無法取到當(dāng)前 Overlay 的位置信息，也就是 e.overlay.pixel 值為 undefined。

在這種情況下，我們就需要自行解決這個問題。經(jīng)過進(jìn)一步的排查，我們最終發(fā)現(xiàn)，問題出在地圖與 Overlay 的交互事件上。

我們所用的百度地圖插件（BaiduMapApi_Load）與地圖官方 API 所實現(xiàn)的消息傳遞方式不一樣。在我們的插件中，通過 Vue Bus 事件輸出地圖中 Overlay 的相關(guān)信息。但是，這樣會影響到 e.overlay 與 BMap 的橋接關(guān)系，從而導(dǎo)致了前面的問題。

為了解決這個問題，我們需要對消息傳遞進(jìn)行改進(jìn)。具體做法如下：

1. 在 Overlay 加載時，調(diào)用 Vue 組件的 $emit 方法，將 Overlay 信息以事件形式發(fā)送出去；

2. 在地圖組件中監(jiān)聽事件，并將 Overlay 儲存在 Vue 實例中的一個數(shù)組中；

3. 在鼠標(biāo)移入事件中，再次使用 Vue Bus 將 Overlay 的 ID 發(fā)送出去；

4. 在需要使用 Overlay 位置信息的語句中，從數(shù)組中獲取相應(yīng)的 Overlay，并通過 BMap.Overlay 原型的 getProjection 方法獲取相應(yīng)的經(jīng)緯度；

5. 最后，使用 BMap.Map 類的 pointToPixel 方法可以將得到的經(jīng)緯度轉(zhuǎn)換為地圖上的坐標(biāo)，再存入 e.overlay.pixel 中即可。

以上就是“vue使用百度地圖鼠標(biāo)移入移除報錯如何解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。