Google Maps模拟点击添加标记与折线异常问题排查

核心原因 #

批量操作时，DirectionsService的异步路线请求会并发执行，导致多个请求的路径结果无序返回并重复叠加到Polyline中；或者模拟点击/复用逻辑时，折线更新逻辑没有同步批量操作的状态，重复触发路径计算。

解决步骤 #

1. 暂停实时折线更新
   在批量添加标记前，设置一个状态标记（比如isBatchAdding），让单次点击触发的折线更新逻辑暂时失效，避免每次添加标记都发起异步请求。

2. 串行处理批量请求
   用for...of循环配合await，确保上一个标记的路径计算完成后，再处理下一个坐标，彻底避免并发请求导致的路径混乱。

3. 重置并统一更新折线
   批量添加完成后，要么直接用所有标记的坐标生成折线（不需要路线规划时），要么串行请求每一段路线并拼接路径点（需要道路路径时），最后一次性更新Polyline。

代码示例 #

修正后的批量添加逻辑

// 全局状态标记，控制是否批量操作
let isBatchAdding = false;
// 存储所有标记的数组
let markers = [];
// 折线实例
let polyline = new google.maps.Polyline({
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2,
  map: map
});

// 批量添加标记的核心方法
async function batchAddMarkers(coords) {
  isBatchAdding = true;
  // 清空现有折线路径，避免旧数据干扰
  polyline.setPath([]);
  
  // 串行处理每个坐标，确保顺序执行
  for (const coord of coords) {
    const latLng = new google.maps.LatLng(coord.lat, coord.lng);
    await addMarkerAndPreparePath(latLng);
  }
  
  isBatchAdding = false;
  // 批量完成后统一生成完整路径
  await updateFullRoutePath();
}

// 添加标记并准备路径数据（不实时更新折线）
function addMarkerAndPreparePath(latLng) {
  const marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
  markers.push(marker);
  // 返回Promise确保异步流程可控
  return Promise.resolve();
}

// 统一请求完整路线并更新折线
async function updateFullRoutePath() {
  if (markers.length < 2) return;
  
  let fullPath = [];
  const directionsService = new google.maps.DirectionsService();
  
  // 串行请求每一段路线
  for (let i = 0; i < markers.length - 1; i++) {
    const origin = markers[i].getPosition();
    const destination = markers[i+1].getPosition();
    
    const result = await new Promise((resolve) => {
      directionsService.route({
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
      }, (response, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          // 提取路线的路径点
          const routePath = response.routes[0].overview_path;
          resolve(routePath);
        } else {
          resolve([]);
        }
      });
    });
    
    // 拼接路径点（注意去掉重复的终点/起点）
    if (i > 0) {
      fullPath = fullPath.concat(result.slice(1));
    } else {
      fullPath = fullPath.concat(result);
    }
  }
  
  // 一次性更新折线
  polyline.setPath(fullPath);
}

// 原手动点击处理逻辑（加入批量判断）
map.addListener('click', async (e) => {
  if (!isBatchAdding) {
    await addMarkerAndPreparePath(e.latLng);
    await updateFullRoutePath();
  }
});

关键注意点 #

• 不要用forEach配合async/await，这会导致并发执行，必须用for...of确保串行。
• 批量操作时直接调用处理函数，而非用google.maps.event.trigger模拟点击，避免事件队列的异步混乱。
• 如果不需要精确的道路路线，可跳过DirectionsService，直接用markers.map(m => m.getPosition())生成折线路径，性能更好且不会有异步问题。

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