vue使用百度地图鼠标移入移除报错如何解决 | 您所在的位置:网站首页 › laya源码鼠标事件 › vue使用百度地图鼠标移入移除报错如何解决 |
vue使用百度地图鼠标移入移除报错如何解决
发布时间:2023-04-07 14:02:41
来源:亿速云
阅读:71
作者:iii
栏目:web开发
今天小编给大家分享一下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使用百度地图鼠标移入移除报错如何解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。 推荐阅读: Vue中Computed和Watch的区别及其用法 Vue中使用可视化图表echarts的方法免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。 vue 上一篇新闻:vue动态添加表单validateField验证功能如何实现 下一篇新闻:jquery怎么实现相对定位 猜你喜欢 Python经典面试题和答案有哪些 Numpy对象与类型怎么应用 怎么用Python代码实现一个简单的凯撒加密算法 Python循环语句和函数怎么应用 C语言分支与循环实例代码分析 Python3字符串的格式化方法怎么用 react的装饰器和HOC怎么应用 Python语言常见报错有哪些及怎么解决 Python加密和解密怎么理解 Django路由反向解析的作用是什么 |
CopyRight 2018-2019 实验室设备网 版权所有 |