看起来你遇到的问题是动画开始前折线就提前显示，核心原因是初始化时折线的路径设置和地图添加时机不对，加上updatePoly函数的逻辑没有正确跟随车辆位置逐步扩展路径。下面是具体的修改方案，让你实现车辆移动时同步绘制轨迹折线（类似你提到的红线效果）：

1. 修正折线的初始化与地图添加逻辑 #

首先，在startAnimation函数中，要确保轨迹折线（poly2）初始只包含起点，并且直接添加到地图上（之前的代码注释掉了添加逻辑，导致折线显示时机异常）：

function startAnimation() {
  if (timerHandle) {
    clearTimeout(timerHandle);
  }
  if (Animationmarker) {
    Animationmarker.setMap(null);
  }
  eol = polyline.Distance();
  map.setCenter(polyline.getPath().getAt(0));
  
  // 初始化车辆标记
  Animationmarker = new google.maps.Marker({
    position: polyline.getPath().getAt(0),
    map: map,
    icon: icon
  });
  
  // 初始化轨迹折线（红色，可自定义样式）
  poly2 = new google.maps.Polyline({
    path: [polyline.getPath().getAt(0)], // 初始仅包含起点
    strokeColor: "#FF0000",
    strokeWeight: 3,
    map: map // 直接添加到地图，无需延迟
  });
  
  // 从距离起点0米的位置开始动画，确保初始状态正确
  setTimeout("animate(0)", 2000);
}

2. 重写updatePoly函数，实现轨迹逐步绘制 #

原来的updatePoly逻辑过于复杂（每20个顶点新建折线），我们简化它，让它随着车辆移动的距离，逐步扩展轨迹折线的路径：

function updatePoly(d) {
  // 获取当前距离对应的原折线顶点索引和车辆实时坐标
  var currentVertexIndex = polyline.GetIndexAtDistance(d);
  var currentPoint = polyline.GetPointAtDistance(d);
  
  // 构建轨迹折线的路径：从起点到当前顶点的所有点 + 车辆实时位置
  var newPath = [];
  // 添加原折线从起点到当前顶点的所有路径点
  for (var i = 0; i <= currentVertexIndex; i++) {
    newPath.push(polyline.getPath().getAt(i));
  }
  
  // 如果车辆还没到最后一个顶点，添加实时位置让轨迹更平滑
  if (currentVertexIndex < polyline.getPath().getLength() - 1) {
    newPath.push(currentPoint);
  }
  
  // 更新轨迹折线的路径
  poly2.setPath(newPath);
}

这个函数的核心逻辑：

• 每次动画更新时，先定位当前车辆对应的原折线顶点
• 把原折线从起点到该顶点的所有节点加入轨迹折线
• 补充车辆的实时位置（未到终点时），让轨迹严格跟随车辆移动路径延伸

3. 调整动画初始参数 #

把animate函数的初始调用从animate(50)改为animate(0)，确保动画从起点开始，轨迹也同步从起点逐步绘制（对应上面startAnimation里的修改）。

关键说明 #

• 假设你已经实现了polyline.GetIndexAtDistance和polyline.GetPointAtDistance这两个自定义方法（用于根据距离匹配原折线的顶点和坐标），如果没有的话，需要先完成这两个方法的编写（核心是计算折线的累计距离，定位对应位置）。
• 可以通过调整step（每次动画移动的距离）和tick（动画间隔时间）参数平衡轨迹平滑度与性能：数值越小越平滑，但会增加浏览器性能消耗。
• 保留原折线（polyline）的原有样式（比如灰色），红色轨迹折线会在它上方逐步覆盖，就能实现你想要的效果。

这样修改后，轨迹折线会随着车辆的移动逐步绘制，不会在动画开始前就显示完整路径啦！

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