Question

我想在路线上显示自定义路线以及当前进度。我已经覆盖了折线以显示路线，我能够找到当前位置的LatLng并放置一个标记。我现在要做的是使用不同的颜色突出Polyline的旅行部分。我很确定一条Polyline不可能有多种颜色，所以我打算在第一条Polyline上覆盖第二条Polyline以产生这种效果。这是我的问题：

了解当前位置的LatLng并使用用于创建原始折线的LatLng点阵列，如何才能最好地创建第二个“Progess”路线？

非常感谢。

Answer 1

有一些假设：

您的路径非常密集（如果没有，您可以插入中间点）
您的路线不会与自身重叠（不适用于重复的圆形路径，比如说）

..一种粗暴的方式如下：

使用Python'y伪代码，假设您有这样的路线：

points = [LatLng(1, 1), LatLng(2, 2), LatLng(3, 3), LatLng(4, 4)]

您可以像往常一样将其绘制为PolyLine。

然后，根据您当前的位置，您会在路线上找到最近的点：

cur_pos = LatLng(3.1, 3.0123)

nearest_latlng = closest_point(points, to = cur_pos)

然后nearest_latlng将包含LatLng(3, 3)

在列表中查找nearest_latlng，然后简单地绘制第二条折线。换句话说，您截断当前LatLng的points列表：

progress_points = [LatLng(1, 1), LatLng(2, 2), LatLng(3, 3)]

..然后在地图上绘制

如上所述，如果路径自行循环（closest_point只能找到第一个或最后一个点），这将会中断。

如果你知道走了多远，就会有一个epoly扩展，它提供了一些可以使用的方法，主要是：

.GetIndexAtDistance(metres)
Returns the vertex number at or after the specified distance along the path.

可以使用该索引代替上面计算的closest_point

Answer 2

打字稿示例：

getRouteProgressPoints(directionResult: google.maps.DirectionsResult | undefined, targetDistance: number) {
  if (!directionResult || targetDistance <= 0) return [];

  const route = directionResult.routes[0];
  const leg: google.maps.DirectionsLeg = route.legs[0];
  const routePoints: google.maps.LatLng[] = [];

  // collect all points
  leg.steps.forEach((step) => {
    step.path.forEach((stepPath) => {
      routePoints.push(stepPath);
    });
  });

  let dist = 0;
  let olddist = 0;
  const points = [];

  // go throw all points until target
  for (let i = 0; i < routePoints.length && dist < targetDistance; i++) {
    const currentPoint = routePoints[i];

    // add first point
    if (!i) {
      points.push(currentPoint);
      continue;
    }

    const prevPoint = routePoints[i - 1];
    olddist = dist;
    // add distance between points
    dist += google.maps.geometry.spherical.computeDistanceBetween(prevPoint, currentPoint);

    if (dist > targetDistance) {
      const m = (targetDistance - olddist) / (dist - olddist);
      const targetPoint = new google.maps.LatLng(
        prevPoint.lat() + (currentPoint.lat() - prevPoint.lat()) * m,
        prevPoint.lng() + (currentPoint.lng() - prevPoint.lng()) * m,
      );
      points.push(targetPoint);
    } else {
      points.push(currentPoint);
    }
  }
  return points;
}

Answer 3

除非你已经有办法确定车辆已经通过某些点，否则这将非常困难。如果您知道它已经通过某些点，您只需创建第二条折线，其中传递的点和当前标记作为折线的末端。您可能希望更改折线的宽度，以便在覆盖初始路线时使其可见。

所有这一切都说，如果你不知道积分是否已经通过我不知道你能做什么，除了写一些代码，确定你当前的位置是否超过一定的点数，但我不知道你是怎么做的，如果一条路线可能在这个地方蜿蜒曲折......现在，如果你的点从直西向东直到等，那么编码的东西会很容易，但我怀疑是这样的

希望这有点帮助......

Google Maps API V3 - 显示路线的进度

3 个答案: