高德地图jssdk在页面使用transform scale缩放后点击偏移问题解决
完美解决页面缩放后,高德地图覆盖物点击事件偏移问题
·
在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)
更多推荐
已为社区贡献1条内容
所有评论(0)