Google Maps：随用户移动更新折线（移除已行驶路段）技术咨询

嘿，你的思路完全没问题——通过移除折线中已驶过的点位并重绘，确实能实现Uber那样的“实时裁剪已完成路线”的效果。我之前做网约车类应用时就用过类似方案，落地起来很顺畅。

一、核心问题：怎么判断哪些点位已经被驶过？ #

要搞定这个，关键是把用户实时位置和路线点位做关联，核心逻辑分两步：

• 第一步：获取稳定的用户实时位置
  先通过Google Maps的位置服务或者原生Geolocation API开启实时定位，拿到用户的LatLng对象。注意要设置合适的定位精度（比如enableHighAccuracy: true），同时处理GPS信号弱的情况（比如缓存上一次的位置）。

• 第二步：遍历路线点位，定位“最后一个未驶过的节点”
  首先你得从Directions API的返回结果里拿到完整的路线点位数组——一般用routes[0].overview_path（简化的路线点）或者legs[0].steps里的每个step的path（更精细的分段点）。

  然后从路线起点开始，逐个判断用户是否已经驶过某个点位：

  1. 用google.maps.geometry.spherical.computeDistanceBetween()计算用户当前位置到路线线段的垂直距离，判断用户是否在当前路段附近
  2. 结合google.maps.geometry.poly.isLocationOnEdge()工具函数，验证用户位置是否在某一段路线的边缘（设置10-20米的误差阈值，容错GPS抖动）
  3. 一旦找到用户当前所在的路段，那该路段的起点及之前的所有点位，就是已经被驶过的部分

  给你一段实用的伪代码逻辑：

  // 从Directions API获取的完整路线点位数组
  const fullRoutePoints = directionsResponse.routes[0].overview_path;
  let lastUnpassedIndex = 0; // 记录最后一个未被驶过的点位下标
  const tolerance = 20; // 20米的误差阈值，根据需求调整
  
  // 遍历路线线段（从第二个点开始，和前一个点组成线段）
  for (let i = 1; i < fullRoutePoints.length; i++) {
    const prevPoint = fullRoutePoints[i-1];
    const currPoint = fullRoutePoints[i];
    // 检查用户位置是否在当前线段的边缘范围内
    const isOnSegment = google.maps.geometry.poly.isLocationOnEdge(
      userCurrentLatLng,
      new google.maps.Polyline({ path: [prevPoint, currPoint] }),
      tolerance / 1000 // 转换为千米，因为API参数单位是千米
    );
  
    if (isOnSegment) {
      lastUnpassedIndex = i;
      break; // 找到当前路段后就停止遍历，提升性能
    }
  }
  

二、更新折线的具体实现 #

找到lastUnpassedIndex后，更新折线就很简单了：

1. 从完整点位数组里截取从lastUnpassedIndex到终点的部分，作为新的路线路径
2. 调用折线对象的setPath()方法直接更新，Google Maps会自动重绘，不需要销毁重建（性能很友好）

示例代码：

// 初始化时创建的路线折线
let activeRoutePolyline = new google.maps.Polyline({
  path: fullRoutePoints,
  strokeColor: '#2563eb',
  strokeWeight: 5,
  map: yourMapInstance
});

// 实时位置更新的回调函数
function handleUserLocationUpdate(userLatLng) {
  // 先执行上面的逻辑，拿到lastUnpassedIndex
  const remainingRoutePoints = fullRoutePoints.slice(lastUnpassedIndex);
  // 更新折线路径
  activeRoutePolyline.setPath(remainingRoutePoints);
}

三、优化建议（避免踩坑） #

• 处理GPS抖动：不要每次位置微小变化就更新路线，建议增加位置过滤逻辑（比如和上一次位置距离超过15米才触发更新），避免折线频繁闪烁
• 提升遍历性能：记录上一次的lastUnpassedIndex，下次遍历从这个位置开始，不用每次都从起点遍历
• 可选：保留已驶过路线的视觉效果：如果需要像Uber那样显示灰色的已完成路线，可以创建两条折线：一条显示剩余路线（彩色），一条显示已完成路线（灰色），每次更新时分别设置两条折线的路径
• 路线偏差处理：如果用户偏离路线超过50米（可自定义阈值），触发重新规划路线，避免裁剪逻辑失效

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