vue使用百度地圖鼠標移入移除報錯如何解決

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

創(chuàng)新互聯(lián)公司專注于平壩企業(yè)網(wǎng)站建設,成都響應式網(wǎng)站建設,商城網(wǎng)站制作。平壩網(wǎng)站建設公司,為平壩等地區(qū)提供建站服務。全流程定制網(wǎng)站設計，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

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

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

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

var point = e.overlay.pixel,

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

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

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

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

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

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

在 Overlay 加載時，調(diào)用 Vue 組件的 $emit 方法，將 Overlay 信息以事件形式發(fā)送出去；
在地圖組件中監(jiān)聽事件，并將 Overlay 儲存在 Vue 實例中的一個數(shù)組中；
在鼠標移入事件中，再次使用 Vue Bus 將 Overlay 的 ID 發(fā)送出去；
在需要使用 Overlay 位置信息的語句中，從數(shù)組中獲取相應的 Overlay，并通過 BMap.Overlay 原型的 getProjection 方法獲取相應的經(jīng)緯度；
最后，使用 BMap.Map 類的 pointToPixel 方法可以將得到的經(jīng)緯度轉換為地圖上的坐標，再存入 e.overlay.pixel 中即可。

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

當前文章：vue使用百度地圖鼠標移入移除報錯如何解決
本文URL：http://muchs.cn/article4/pppcie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供電子商務、小程序開發(fā)、搜索引擎優(yōu)化、域名注冊、App開發(fā)、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容