高德地图如何禁止缩放以及可以触摸滚动页面

[towry]

在移动设备上，如果用户触摸滚动页面，触摸到高德地图的时候，会无法滚动页面。因为高德地图添加了 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);
});