使用 Google Maps 3 API 在地图上获取多条路线

Question

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

Answer 1

是的，这很简单，只要你掌握了窍门。

您想使用 DirectionsRenderer 对象。

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

这是一个使用不同颜色折线的示例。 ：

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 点。

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