在vue大屏项目中,为了适配所有屏幕的分辨率,在#app元素上使用transform scale对整体做了缩放,但是高德地图的覆盖物点击事件就偏移了,点不到覆盖物,百度搜到了两个解决方案:

1、创建地图实列加上viewMode: "3D",亲测无效;
2、将地图功能通过iframe引入:把地图功能单独抽出来配置路由,通过iframe引入,亲测有效,但性能和体验极差,因为通过iframe去引入,相当于重新加载了整个项目,严重消耗性能,iframe会长时间的空白,而且不方便添加功能

经过摸索,最终发现,只要通过scale,把地图最外层的dom缩小回原来的大小即可,比如#app的scale(0.5,0.4),只需要设置 .map的 scale(2,2.5) 就可以让点击事件偏移正常。计算公式为 (1 / #app的scale)

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐