高德地图如何禁止缩放以及可以触摸滚动页面
towry opened this issue · comments
Towry Wang commented
在移动设备上,如果用户触摸滚动页面,触摸到高德地图的时候,会无法滚动页面。因为高德地图添加了 touchmove 事件并阻止了浏览器默认行为,而且有地图缩放和地图拖拽的交互。
那么如何让高德地图可以触摸并滚动页面,但是不影响高德地图的点击事件呢?
需要禁止高德地图的缩放以及拖拽。
这个可以通过地图的选项来达到:dragEnable: false
, zoomEnable: false
。
我们需要处理高德地图的 touchmove
事件。
首先,添加样式去除高德地图的 touch-action: none;
的样式:
.amap-container {
touch-action: 'auto' !important;
}
然后去除高德地图对地图里的元素 amap-maps
的 touchmove
事件。方法如下图:
我们在地图加载后,进行去除事件的操作:
const amaps = this.$el.querySelector(".amap-maps");
const events = amaps["chiiEvents"] || {};
// remove all touchmove events so we can touch move the page.
const touchmoves = events["touchmove"] || [];
touchmoves.forEach((fn) => {
amaps.removeEventListener("touchmove", fn);
});