vue-baidu-map点击描点错位问题处理

问题描述

项目中使用到了vue-baidu-map这个插件来进行地图定位描点，但是当页面发生滚动时，在地图上点击A点，但是描点的位置却在B点。而且，随着页面滚动位置越大，描点错位越厉害。可以在这里下载代码预览。如下图：

百度地图点击错位

问题解决

当发现这个问题，思考应该是页面发生滚动时百度地图获取到的点击位置和实际位置出现了偏差，导致实际获取的经纬度(B)和点击位置(A)的经纬度出现错位的现象。

经过试验发现，当body内部元素出现滚动，例如：设置了CSS overflow:scroll时，滚动页面，就会出现错位。因此，解决思路就是设置当前页面除body外，内部元素避免出现滚动。
因此，只要取消内部class='home'的overflow:scroll就可以了.

另外，由于我做的这个项目是半路加入的，因此为了避免修改公共样式引起其他页面的问题，我的解决方式是在vue组件生命周期的beforeCreate中进行修改，然后在beforeDestroy或destroyed生命周期还原样式。

当然，由于每个项目中样式并不总是一样，修改的方式也各有不同，如果你有其他的修改方式，请在评论中给出，供大家借鉴。

如果对你有用给个赞再走，谢谢。