Leaflet地图双指拖拽未触发movestart事件导致自动跟随失效问题咨询

故障根因 #

你在初始化地图时直接将移动端的dragging配置设为false，等于完全禁用了移动端的地图拖动模块，双指操作时的地图位移是缩放功能附带的效果，不会触发dragging模块抛出的movestart事件，因此你绑定的暂停自动跟随逻辑不会执行。

修复方案 #

方案一（改动最小，兼容原有逻辑） #

不要直接禁用移动端的dragging模块，改为动态判断触摸点数，仅双指时启用拖动，单指时禁用拖动保证页面可以正常滚动，此时拖动操作会正常触发movestart事件，原有自动跟随暂停逻辑无需修改。
修改后的地图初始化代码：

var mymap = L.map('mapid', { 
   center: [latitude,longitude],
   zoom: 17,
   layers: [streetmap], //default layer
   tap: !L.Browser.mobile
}); 
// 移动端动态控制拖动触发逻辑
if (L.Browser.mobile) {
  // 默认禁用拖动，保证单指可以滚动页面
  mymap.dragging.disable();
  // 双指触摸时启用拖动
  mymap.on('touchstart', function(e) {
    if (e.touches.length === 2) {
      mymap.dragging.enable();
    }
  });
  // 触摸结束后重新禁用拖动
  mymap.on('touchend', function(e) {
    mymap.dragging.disable();
  });
}

方案二（不改动原有拖动逻辑，新增监听兼容） #

如果你不想调整原有拖动实现，可额外监听移动端触摸事件，手动触发暂停自动跟随的逻辑，新增代码如下：

if (L.Browser.mobile) {
  let prevCenter = mymap.getCenter();
  // 双指触摸开始时记录当前地图中心
  mymap.on('touchstart', function(e) {
    if (e.touches.length === 2) {
      prevCenter = mymap.getCenter();
    }
  });
  // 双指移动时判断地图是否被拖动
  mymap.on('touchmove', function(e) {
    if (e.touches.length === 2 && !currentAutoMove) {
      const newCenter = mymap.getCenter();
      // 中心偏移超过阈值则判定为用户主动拖动
      if (Math.abs(newCenter.lat - prevCenter.lat) > 0.00001 || Math.abs(newCenter.lng - prevCenter.lng) > 0.00001) {
        pauseAutoMove = true;
        panbtn.state('pauseAutoMove');
        prevCenter = newCenter;
      }
    }
  });
}

内容的提问来源于stack exchange，提问作者PPrime