使用Google Maps 3 API在地图上获取多条路线 [英] Using Google Maps 3 API to get multiple routes on a Map

问题描述

我正在研究车辆路线问题。最近我花了一段时间浏览Google Maps API，看看我是否可以在同一张地图上打印多条路线。
我想要以下内容：
route1：
point a，b，c，a
route 2
point a，d，e，f，a
路线3
指向a，g，h，a
，我希望每条路线具有不同的颜色折线。
有人可以帮我解决这个问题。

I am working on a Vehicle Routing Problem. Recently I have spent a bit of time going through Google Maps API to see if I can print multiple routes on the same map. I would like the following: route1: point a, b, c, a route 2 point a, d, e, f, a route 3 point a, g, h, a and I would like each route to have a different color polyline. Can someone help me with this.

推荐答案

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

Yeah, this is pretty simple, once you get the hang of it.

你想使用directionsRenderer对象。

You want to use the directionsRenderer object.

最重要的是你希望你所有的路线都设置在数组中，然后你想遍历它们通过一个循环。每次创建一个新的DirectionsRenderer对象，并每次将其设置为地图。在循环内部，您还需要创建一个新的多段线变量，每次使用不同的颜色传递给directionsRenderer。我使用了一些代码，但不知道它现在在哪里。

The big thing is that you want your routes all set up in array, then you want to iterate through them via a loop. Creating a new directionsRenderer object each time and setting it to the map each time. Inside the loop you will also want to create a new polyline variable that you pass to the directionsRenderer with a different color each time. I use to have some code that did this but don't know where it is at at the moment.

以下是使用不同颜色多段线的人的示例。 ：

Here is an example of someone using different color polylines. :

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

如果您专注于以下两行代码，您将看到折线颜色的设置方式以及它如何传递给directionsRenderer。

If you focus on these two below lines of code you will see how the polyline color is set and also how it is passed to the directionsRenderer.

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

另一个很好的例子。

Another good example.

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

如果您专注于上面的代码在google示例中提供了您将看到的waypts var。这就是您的inbetween标记将被设置的位置（如您所说的b点）。您将通过执行 waypts.push（.. ...）。原点和目的地将是你的a点和b点。

If you focus on the above code in the google example provided you will see waypts var. That is where your inbetween marker will be set (as you say point b). You will do this by doing a waypts.push(.....). The origin and destination will be your point a and point b.

不应该太难。我建议抓住一个最接近你的需求的谷歌示例，并将其缩小到一个简单的项目，然后从那里构建它。

Shouldn't be too difficult to slap something together. I would suggest grabbing a google example closest to your needs and skimming it down to a simple project and then building it up from there.

这篇关于使用Google Maps 3 API在地图上获取多条路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！