移动端Google Maps添加新多边形后拖拽失效，求可行解决方案

这个坑我之前也踩过！Google Maps API在触摸设备上的动态元素事件绑定确实有不少小问题，尤其是拖拽功能。结合你的情况，初始化的多边形能正常拖拽，但新增的不行，核心原因是动态创建的多边形没有正确绑定触摸事件监听器。下面给你几个可行的解决办法：

1. 强制刷新Draggable属性（最简单有效） #

动态创建多边形后，先临时禁用再重新启用draggable属性，这样可以强制Google Maps API重新绑定触摸事件。这个方法对大多数场景都有效：

function addNewPolygon(map, initialPaths) {
  // 创建多边形
  const newPolygon = new google.maps.Polygon({
    paths: initialPaths,
    draggable: true,
    editable: true,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });

  // 针对触摸设备的修复
  if ('ontouchstart' in window) {
    // 先禁用拖拽
    newPolygon.setDraggable(false);
    // 延迟100ms后重新启用，确保API完成事件绑定
    setTimeout(() => {
      newPolygon.setDraggable(true);
    }, 100);
  }

  return newPolygon;
}

原理是Google Maps在设置draggable为true时，会自动绑定鼠标和触摸事件，但动态创建时可能因为时序问题跳过了触摸事件的绑定，通过重新设置可以触发这个逻辑。

2. 自定义触摸事件处理（兜底方案） #

如果上面的方法无效，可以完全绕开API的原生触摸逻辑，自己实现拖拽功能。这种方式虽然代码多一点，但稳定性更高：

function createDraggablePolygon(map, initialPaths) {
  const polygon = new google.maps.Polygon({
    paths: initialPaths,
    draggable: false, // 关闭原生拖拽，用自定义逻辑
    editable: true,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });

  // 存储拖拽状态的临时变量
  let dragStart = null;
  let initialPathsBackup = null;

  // 监听触摸开始事件
  google.maps.event.addListener(polygon, 'touchstart', (e) => {
    dragStart = e.latLng;
    // 记录初始路径的副本
    initialPathsBackup = polygon.getPaths().getArray().map(path => 
      path.getArray().map(point => new google.maps.LatLng(point.lat(), point.lng()))
    );
  });

  // 监听触摸移动事件
  google.maps.event.addListener(polygon, 'touchmove', (e) => {
    if (!dragStart || !initialPathsBackup) return;
    
    // 计算触摸点的偏移量
    const latOffset = e.latLng.lat() - dragStart.lat();
    const lngOffset = e.latLng.lng() - dragStart.lng();

    // 更新所有路径点的位置
    const updatedPaths = initialPathsBackup.map(path => 
      path.map(point => new google.maps.LatLng(
        point.lat() + latOffset,
        point.lng() + lngOffset
      ))
    );

    polygon.setPaths(updatedPaths);
  });

  // 监听触摸结束事件，清理临时变量
  google.maps.event.addListener(polygon, 'touchend', () => {
    dragStart = null;
    initialPathsBackup = null;
  });

  return polygon;
}

这个方法直接接管了触摸事件的处理，完全不受API原生触摸bug的影响，适合复杂场景。

3. 其他排查点 #

• 更新API版本：确保你使用的是最新的Google Maps API版本，旧版本的触摸事件bug更多。比如引入时用v=weekly获取最新测试版，或者指定稳定版本号。
• 检查事件冲突：如果页面上有其他触摸事件（比如滚动拦截、手势库），可能会阻止地图捕获触摸事件。可以尝试在地图容器上添加touch-action: none的CSS，避免浏览器默认触摸行为干扰：

#map {
  touch-action: none;
}

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