vue使用百度地图鼠标移入移除报错如何解决

今天小编给大家分享一下vue使用百度地图鼠标移入移除报错如何解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

首先，我们来看一下问题的具体表现。

在 Vue 组件中，使用百度地图插件（BaiduMapApi_Load），并通过 JavaScript 实现了在地图上绘制多个覆盖物（Overlay）。当鼠标移入覆盖物时，注入的鼠标事件中出现了报错。错误信息显示为“Cannot read property 'pixel' of undefined”。

经过对代码进行排查，发现报错的代码是：

var point = e.overlay.pixel,

也就是说，在该语句中，e.overlay.pixel 出现了无法识别的情况。

接着查看了相关文档及源代码，发现此处 e.overlay.pixel 在百度地图官方文档并没有作出详细说明，只能从代码实现上来推测。

经过多次尝试，发现只有在 Overlay 继承了 BMap.Overlay 类，才可以通过 e.overlay._div 来获取当前 Overlay 的 DOM 元素。但是使用 e.overlay._div 仍然无法取到当前 Overlay 的位置信息，也就是 e.overlay.pixel 值为 undefined。

在这种情况下，我们就需要自行解决这个问题。经过进一步的排查，我们最终发现，问题出在地图与 Overlay 的交互事件上。

我们所用的百度地图插件（BaiduMapApi_Load）与地图官方 API 所实现的消息传递方式不一样。在我们的插件中，通过 Vue Bus 事件输出地图中 Overlay 的相关信息。但是，这样会影响到 e.overlay 与 BMap 的桥接关系，从而导致了前面的问题。

为了解决这个问题，我们需要对消息传递进行改进。具体做法如下：

1. 在 Overlay 加载时，调用 Vue 组件的 $emit 方法，将 Overlay 信息以事件形式发送出去；

2. 在地图组件中监听事件，并将 Overlay 储存在 Vue 实例中的一个数组中；

3. 在鼠标移入事件中，再次使用 Vue Bus 将 Overlay 的 ID 发送出去；

4. 在需要使用 Overlay 位置信息的语句中，从数组中获取相应的 Overlay，并通过 BMap.Overlay 原型的 getProjection 方法获取相应的经纬度；

5. 最后，使用 BMap.Map 类的 pointToPixel 方法可以将得到的经纬度转换为地图上的坐标，再存入 e.overlay.pixel 中即可。

以上就是“vue使用百度地图鼠标移入移除报错如何解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。