Google Map API多标记无法正确刷新问题（AJAX实时加载场景）

看起来你遇到的核心问题是当标记数量减少时，旧的标记没有被正确移除——这是AJAX实时更新地图标记时非常常见的坑，我来帮你一步步解决：

关键思路：用全局数组管理所有标记 #

每次刷新前，必须先把地图上已有的旧标记全部清除，再添加新的标记。只更新新标记而不清理旧的，就会出现“标记越积越多”或者“移除元素后旧标记还留在地图上”的情况。

步骤1：声明全局变量存储标记 #

首先在你的代码全局作用域里定义一个数组，用来保存所有已添加到地图的标记实例：

// 全局数组，专门存地图上的标记
let mapMarkers = [];

步骤2：编写清除旧标记的函数 #

这个函数负责遍历所有标记，把它们从地图上移除，然后清空数组：

function clearMapMarkers() {
  // 逐个移除地图上的标记
  mapMarkers.forEach(marker => marker.setMap(null));
  // 清空数组，准备存新标记
  mapMarkers = [];
}

步骤3：修改AJAX刷新逻辑 #

在你获取到新的坐标数组后，先调用清除函数，再添加新标记：

function updateMapMarkers() {
  // 发送AJAX请求获取最新坐标数组
  $.ajax({
    url: '你的WebService接口地址',
    method: 'GET',
    dataType: 'json',
    success: function(newCoordsArray) {
      // 第一步：先清掉所有旧标记！这步千万不能忘
      clearMapMarkers();

      // 第二步：遍历新坐标，添加新标记
      newCoordsArray.forEach(coords => {
        const position = new google.maps.LatLng(coords[0], coords[1]);
        const newMarker = new google.maps.Marker({
          position: position,
          map: yourMapInstance // 这里替换成你初始化的Google Map实例变量
        });
        // 把新标记存入全局数组
        mapMarkers.push(newMarker);
      });
    },
    error: function(err) {
      console.warn('获取标记数据出错:', err);
    }
  });
}

额外排查点 #

• 可以在AJAX的success回调里加console.log(newCoordsArray)，确认WebService返回的数组确实是你期望的长度（比如移除元素后数组长度减少了）
• 如果你的标记用了自定义图标或信息窗口，确保这些附加内容也没有残留（不过只要清除了标记实例，这些一般会跟着消失）
• 如果你用了标记聚合库（比如MarkerClusterer），也要记得先清空聚合器再重新添加新标记

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