React Google Maps多边形拖拽编辑后坐标同步更新异常问题

问题背景 #

• 基于 react-google-maps 实现地图多边形交互编辑，已落地能力包括多边形边部新增节点、顶点位置拖拽调整
• 现有实现已为 Polygon 组件开启 editable、draggable 属性，基础编辑逻辑挂在 onMouseUp 事件上：分别实现边位置点击新增节点、顶点拖拽完成后更新本地坐标的逻辑

异常表现 #

• 不对多边形执行整体拖拽操作时，节点编辑、新增逻辑可正常运行
• 一旦将多边形整体拖拽至新位置，后续对原有节点的编辑操作会直接失效

根因定位 #

• 开启 draggable 属性后，Google Maps 底层 API 会直接修改地图渲染层的多边形顶点坐标，该过程不会触发原有 onMouseUp 上挂载的坐标同步逻辑
• 本地存储的多边形坐标状态始终停留在拖拽前的旧值，后续节点编辑逻辑基于旧坐标做计算、渲染时，会出现坐标映射不匹配的问题，最终导致编辑操作失效

修复方案 #

• 核心目标：在多边形整体拖拽完成后，同步拉取地图渲染层的最新坐标，覆盖更新本地状态值
• 具体实现步骤：
  1. 为 Polygon 组件新增绑定 onDragEnd 事件回调
  2. 在回调中通过 Polygon 原生实例的 getPath() 方法，获取拖拽完成后的全量顶点坐标列表
  3. 将坐标列表转换为本地状态要求的 LatLng 格式数组，调用状态更新方法覆盖本地缓存的多边形坐标
• 性能优化点：可在坐标更新前做精度判断，当新旧坐标的经纬度差值小于1e-6的业务阈值时，跳过状态更新，避免无意义的组件重渲染

注意：不要把坐标同步逻辑挂在拖拽过程的 onDrag 事件上高频触发，会造成地图操作卡顿，拖拽结束后一次性同步坐标即可完全满足功能要求

内容的提问来源于stack exchange，提问作者Varun Gopal K.P