Google Maps标记拖拽确认问题：点击NO后标记未回归dragstart位置

这个问题我之前帮人排查过，核心就是没在拖拽开始时把标记的初始位置存下来，导致点NO的时候程序找不到“回去的坐标”。下面给你一套完整的解决方案，附带代码示例和关键逻辑说明：

核心思路拆解 #

• 第一步：在标记的dragstart事件触发瞬间，立刻记录下拖拽前的初始经纬度
• 第二步：在dragend事件里弹出确认弹窗，根据用户选择执行操作：
  • 点击YES：无需额外操作，标记已经停在拖拽后的位置
  • 点击NO：调用标记的setPosition()方法，把坐标重置为之前保存的初始位置

完整代码示例 #

// 初始化地图（假设你已经有了map实例）
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
});

// 创建可拖拽的标记
const marker = new google.maps.Marker({
  position: { lat: -34.397, lng: 150.644 },
  map: map,
  draggable: true, // 必须开启拖拽功能
});

// 用于保存标记初始位置的变量
let originalMarkerPosition;

// 监听拖拽开始事件，保存初始坐标
marker.addListener("dragstart", () => {
  originalMarkerPosition = marker.getPosition();
  console.log("拖拽开始，初始位置已保存：", originalMarkerPosition);
});

// 监听拖拽结束事件，处理确认弹窗
marker.addListener("dragend", () => {
  const confirmMove = confirm("确认要移动标记到当前位置吗？");
  
  if (!confirmMove) {
    // 用户点击NO，重置标记到初始位置
    marker.setPosition(originalMarkerPosition);
    console.log("已取消移动，标记回到初始点");
  } else {
    console.log("确认移动，标记位置已更新");
  }
});

额外注意点 #

• 如果是动态生成多个标记（比如循环创建），要给每个标记单独绑定自己的初始位置变量，避免变量污染。可以把位置存在标记的自定义属性里，比如marker.originalPos = marker.getPosition()，这样每个标记都有自己的专属初始坐标。
• 确保保存初始位置的变量在事件监听器的作用域内可访问，别把它定义在dragstart事件内部，不然dragend里拿不到值。

这样修改后，用户拖拽标记后点击NO，标记就会准确回到拖拽前的起始位置啦～

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