google-maps - 使用 Google Maps 3 API 在 map 上获取多条路线

Question

我正在研究车辆路线问题。最近我花了一些时间浏览 Google Maps API，看看我是否可以在同一张 map 上打印多条路线。
我想要以下内容:
路线1:
点 a、b、c、a
路线 2
点 a、d、e、f、a
路线 3
点 a, g, h, a
我希望每条路线都有不同颜色的折线。
有人可以帮我弄这个吗。

Answer 1

是的，这很简单，一旦你掌握了窍门。

您想使用 DirectionsRenderer 对象。

最重要的是您希望您的路线全部设置在数组中，然后您想通过循环遍历它们。每次创建一个新的方向渲染器对象，每次都将其设置到 map 上。在循环内部，您还需要创建一个新的折线变量，您每次都将其传递给方向渲染器，并使用不同的颜色。我曾经有一些代码可以做到这一点，但目前不知道它在哪里。

这是某人使用不同颜色折线的示例。 :

http://www.geocodezip.com/violette_com_TestMap2c.html

如果您关注下面这两行代码，您将看到折线颜色是如何设置的，以及它是如何传递给方向渲染器的。

directionsDisplayActual = new google.maps.DirectionsRenderer({suppressMarkers: true, polylineOptions: polylineOptionsActual})

var polylineOptionsActual = {
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 10
      };

您的路线的下一个方式。 :

http://code.google.com/apis/maps/documentation/javascript/examples/directions-waypoints.html

另一个很好的例子。

var request = {
    origin: start, 
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {

如果您专注于提供的 google 示例中的上述代码，您将看到 waypts var。那就是设置中间标记的位置(正如您所说的点 b)。您将通过执行 waypts.push(.....) 来做到这一点。 .起点和终点将是您的点 a 和点 b。

把东西拍在一起应该不会太难。我建议捕获一个最接近您需求的谷歌示例并将其略读到一个简单的项目，然后从那里构建它。