Using Google Maps 3 API to get multiple routes on a Map

前端 未结 1 1817
死守一世寂寞
死守一世寂寞 2020-12-08 16:28

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 l

相关标签:
1条回答
  • 2020-12-08 17:08

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

    You want to use the directionsRenderer object.

    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

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

    Next waypts for your routes. :

    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) {
    

    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.

    0 讨论(0)
提交回复
热议问题