谷歌地图API V3 - 显示沿途进展

Question

我希望在一条路线上展示自定义路径和当前进度。我已经覆盖了一个Polyline来显示路线，而且我能够找到当前位置的LatLng并放置标记。现在我想用不同的颜色突出显示行进部分的Polyline。我相信一个Polyline不可能有多个颜色，所以我打算在第一个Polyline上叠加第二个Polyline来实现这个效果。我的问题是：

在知道当前位置的LatLng和使用创建原始Polyline的LatLng点数组的情况下，如何最好地创建第二个“Progess”路线？

提前感谢。

- ratface

Answer 1

在一些假设的基础上：

• 您的路径相当密集（如果不是，您可以插值中间点）
• 您的路线不会重叠（例如，不适用于重复的圆形路径）

..一个粗略的方法如下：

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

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

- dbr

Answer 2

Typescript 示例：

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;
}

- fenyagg

Answer 3

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

所有这些都说了，如果您不知道是否已经通过了这些点，除了编写某种代码来确定当前位置是否超过了某些点之外，我不知道您还能做什么，但是如果路线曲折地走动，我不知道该怎么做.....现在，如果您的点从直西到直东等，那么编写某些东西将很容易，但我怀疑情况并非如此。

希望这有所帮助....

- Bill Blankenship