Vue3组合式API中如何删除Google Maps标记（JS版Gmaps API）

你的标记删除失败的核心原因是删除函数的逻辑错误：在遍历标记数组的循环内部，第一次迭代就直接将markers.value设为空数组，导致循环提前终止，无法正确处理所有标记。

修复后的删除函数 #

const removeMarker = () => {
  console.log('remove marker');
  // 先遍历所有标记，调用setMap(null)从地图移除
  for (let i = 0; i < markers.value.length; i++) {
    markers.value[i].setMap(null);
  }
  // 遍历完成后再清空标记数组
  markers.value = [];
};

更简洁的写法 #

可以用forEach简化遍历逻辑，代码可读性更强：

const removeMarker = () => {
  markers.value.forEach(marker => marker.setMap(null));
  markers.value = [];
};

原代码失效的原因 #

原代码中，循环第一次执行时就把markers.value置为空数组，此时数组长度变为0，循环条件i < markers.value.length不再成立，循环直接终止。即便第一次循环调用了setMap(null)，也会因为数组引用被提前修改，导致标记无法被正确移除。

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