最近在使用 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 的桥接关系，从而导致了前面的问题。
为了解决这个问题，我们需要对消息传递进行改进。具体做法如下：
- 在 Overlay 加载时，调用 Vue 组件的 $emit 方法，将 Overlay 信息以事件形式发送出去；
- 在地图组件中监听事件，并将 Overlay 储存在 Vue 实例中的一个数组中；
- 在鼠标移入事件中，再次使用 Vue Bus 将 Overlay 的 ID 发送出去；
- 在需要使用 Overlay 位置信息的语句中，从数组中获取相应的 Overlay，并通过 BMap.Overlay 原型的 getProjection 方法获取相应的经纬度；
- 最后，使用 BMap.Map 类的 pointToPixel 方法可以将得到的经纬度转换为地图上的坐标，再存入 e.overlay.pixel 中即可。
到此，问题得到了完美的解决。
总结一下，这个问题的根本原因，在于消息传递顺序的问题。在使用 Vue 开发时，我们需要特别注意事件的分发和监听顺序，避免出现此类问题。另外，在使用百度地图插件时，建议使用官方 API 的消息传递方式，否则容易产生类似问题。
