Google Maps重复绘制Polyline求助：移除旧折线仍重复生成新折线

这种每次位置更新都新增一条折线的情况，大概率是你没有正确持有旧Polyline的引用，或者移除旧折线的操作没执行到位。我来帮你拆解常见的错误场景和对应的修复方案：

常见问题排查与修复 #

1. 未全局持有旧Polyline的引用 #

如果每次绘制新折线时，你都用局部变量存储Polyline实例，旧折线的引用会直接丢失，自然无法移除它。

错误示例：

function updatePolyline(newCoords) {
  // 每次都是新的局部变量，旧折线找不到了
  let polyline = new google.maps.Polyline({
    path: newCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
}

修复方案：
在全局（或组件状态中）保存Polyline的引用，确保每次更新时都能拿到旧实例：

// 全局/组件级变量存储旧折线
let existingPolyline = null;

function updatePolyline(newCoords) {
  // 先移除旧折线
  if (existingPolyline) {
    existingPolyline.setMap(null);
  }
  // 创建新折线并保存引用
  existingPolyline = new google.maps.Polyline({
    path: newCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
}

2. 移除操作的执行顺序错误 #

如果先绘制新折线再移除旧的，不仅可能出现视觉闪烁，一旦代码执行中出现异常，旧折线就会永久留在地图上。

错误顺序：

function updatePolyline(newCoords) {
  // 先画新的，再删旧的，存在风险
  const newPolyline = new google.maps.Polyline({...});
  newPolyline.setMap(map);
  if (existingPolyline) {
    existingPolyline.setMap(null);
  }
  existingPolyline = newPolyline;
}

正确顺序：
必须先移除旧折线，再创建并添加新的，参考第一个修复示例的逻辑。

3. 可选优化：直接更新现有折线的路径 #

如果只是坐标数组更新，完全不需要每次创建新的Polyline实例，直接修改现有实例的路径更高效：

function updatePolyline(newCoords) {
  if (!existingPolyline) {
    // 第一次初始化折线
    existingPolyline = new google.maps.Polyline({
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      map: map
    });
  }
  // 直接更新路径，无需重新创建实例
  existingPolyline.setPath(newCoords);
}

验证小技巧 #

可以在移除旧折线的逻辑里加个日志，确认操作确实被执行了：

if (existingPolyline) {
  console.log('已移除旧折线');
  existingPolyline.setMap(null);
}

如果你的代码还有框架相关的特殊逻辑（比如React/Vue），可以把具体代码贴出来，我再帮你细化排查！

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