在谷歌地图上显示多条路线

I am trying to show multiple routes on google map but It is showing only one. Can you please what I am doing wrong?

我试图在谷歌地图上显示多个路线，但它只显示一个。你能取悦我做错了吗？

<div class="searchmap" style="float:left;margin-left:1%" id="map"></div>

var map          = null;
var markerPoints = [];

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() 
{   
  directionsDisplay = new google.maps.DirectionsRenderer(); 
  map = new google.maps.Map(document.getElementById("map"), {scrollwheel:false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, streetViewControl: false, center:new google.maps.LatLng(19.0759837, 72.87765590000004), zoom:13});


  directionsDisplay.setMap(map);
}


function calcRoute(flat, flng, tlat, tlng)
{
    var start = new google.maps.LatLng(flat, flng);
    var end   = new google.maps.LatLng(tlat, tlng);     

    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: false,
        suppressInfoWindows: true
    });
    directionsDisplay.setMap(map);

    directionsService.route(request, function(result, status) {
        console.log(result);

        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    });
} 

calcRoute("19.210430", "72.843422", "19.109858", "72.878433");
calcRoute("19.228977", "72.856812", "19.117302", "72.884041");

Can you please let me know what I am doing wrong?

你能告诉我我做错了什么吗？

4 个解决方案

#1

Display multiple routes on google map with waypoints and direction arrow
==============

Click here!

点击这里！

![In image u can see 2 routes with direction arrow][1]

 <style>
    html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>


     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script>




      var directionsService;
      var stepDisplay;

      var position;
      var marker = [];
      var polyline = [];
      var poly2 = [];
      var poly = null;
      var startLocation = [];
      var endLocation = [];
      var timerHandle = [];




      var stops_data = [[ {"Geometry":{"Latitude":23.05242,"Longitude":72.53375}},

                          {"Geometry":{"Latitude":23.03007,"Longitude":72.59664}}

                        ] ,[ {"Geometry":{"Latitude":23.00959,"Longitude":72.56189}},
                             {"Geometry":{"Latitude":23.05754,"Longitude":72.55302}}
                           ]];



      var a,z,b;

      var add;


      var speed = 0.000005, wait = 1;
      var infowindow = null;


       infowindow = new google.maps.InfoWindow();


      var myPano;   
      var panoClient;
      var nextPanoId;








          var directionsDisplay = [];

          directionsDisplay[0] = new window.google.maps.DirectionsRenderer({
              suppressMarkers: true

            });


          directionsDisplay[1] = new window.google.maps.DirectionsRenderer({
              suppressMarkers: true

            });

          var map;
          var mapOptions = { center: new google.maps.LatLng(42.5584308, -70.8597732), zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP };

          function initialize() 
          {
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


            directionsService = new google.maps.DirectionsService();


         //   Setroute(locations[0],locations[1],directionsDisplay[0]);

           // Setroute(locations2[0],locations2[1],directionsDisplay[1]);


            Tour_startUp(stops_data[0]);

            window.tour.loadMap(map, directionsDisplay[0]);
           window.tour.fitBounds(stops_data[0],map);



            if (stops_data[0].length > 1)
                window.tour.calcRoute(stops_data[0],directionsService, directionsDisplay[0]);



            Tour_startUp(stops_data[1]);
            window.tour.loadMap(map, directionsDisplay[1]);
            window.tour.calcRoute(stops_data[1],directionsService, directionsDisplay[1]);
            window.tour.fitBounds(stops_data[1],map);





          }




    function fx(o)
    {
      if(o && o.legs)
      {
        for(l=0;l<o.legs.length;l++)
        {
          var leg=o.legs[l];
          for(var s=0;s<leg.steps.length;++s)
          {
            var step=leg.steps[s],
                a=(step.lat_lngs.length)?step.lat_lngs[0]:step.start_point,
                z=(step.lat_lngs.length)?step.lat_lngs[1]:step.end_point,
                dir=((Math.atan2(z.lng()-a.lng(),z.lat()-a.lat())*180)/Math.PI)+360,
                ico=((dir-(dir%3))%120);
                new google.maps.Marker({
                  position: a,
                  icon: new google.maps.MarkerImage('http://maps.google.com/mapfiles/dir_'+ico+'.png',
                                              new google.maps.Size(24,24),
                                              new google.maps.Point(0,0),
                                              new google.maps.Point(12,12)
                                             ),
            map: map,
            title: Math.round((dir>360)?dir-360:dir)+'°'
          });

          }
        }
      }
    }


    function Tour_startUp(stops) {

        //  alert('first'+stops.length);     

        if (!window.tour) window.tour = {
            updateStops: function (newStops) {
                stops = newStops;
            },


            // map: google map object
            // directionsDisplay: google directionsDisplay object (comes in empty)
            loadMap: function (map, dirdis) {
                var myOptions = {
                    zoom: 15,
                    center: new window.google.maps.LatLng(51.507937, -0.076188), // default to London
                    mapTypeId: window.google.maps.MapTypeId.ROADMAP
                };
                map.setOptions(myOptions);
                dirdis.setMap(map);
            },
         fitBounds: function (stops_data,map) {
                var bounds = new window.google.maps.LatLngBounds();

                // extend bounds for each record 
                for( var x in stops_data) {
                    var myLatlng = new window.google.maps.LatLng(stops_data[x].Geometry.Latitude, stops_data[x].Geometry.Longitude);
                    bounds.extend(myLatlng);
                }
                map.fitBounds(bounds);
            },
            calcRoute: function (stops_new,directionsService, dirdis) {
                var batches = [];
                var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
                var itemsCounter = 0;
                var wayptsExist = stops_new.length > 0;
                var time= [];
                while (wayptsExist) {
                    var subBatch = [];
                    var subitemsCounter = 0;

                   // alert('second'+stops_new.length);        
            //alert(stops_new[0].Geometry.Latitude +' ===== ' +stops_new[0].Geometry.Longitude);


                    for (var j = itemsCounter; j < stops_new.length; j++) {
                        subitemsCounter++;

                    //alert(stops[j].Geometry.Time);



                        subBatch.push({
                            location: new window.google.maps.LatLng(stops_new[j].Geometry.Latitude, stops_new[j].Geometry.Longitude),
                            stopover: true

                        });

                       //time.push(stops[j].Geometry.Time);

                        if (subitemsCounter == itemsPerBatch)
                            break;
                    }

                    itemsCounter += subitemsCounter;
                    batches.push(subBatch);
                    wayptsExist = itemsCounter < stops_new.length;
                    // If it runs again there are still points. Minus 1 before continuing to
                    // start up with end of previous tour leg
                    itemsCounter--;
                }

                // now we should have a 2 dimensional array with a list of a list of waypoints
                var combinedResults;
                var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
                var directionsResultsReturned = 0;




                for (var k = 0; k < batches.length; k++) {
                    var lastIndex = batches[k].length - 1;
                    var start = batches[k][0].location;
                    var end = batches[k][lastIndex].location;

                    // trim first and last entry from array
                    var waypts = [];
                    waypts = batches[k];
                    waypts.splice(0, 1);
                    waypts.splice(waypts.length - 1, 1);

                    var request = 
                        {
                        origin: start,
                        destination: end,
                        waypoints: waypts,
                        travelMode: window.google.maps.TravelMode.WALKING
                    };

                  //  alert('start'+start);

                 //   alert('end'+end);


                    (function (kk) {
                        directionsService.route(request, function (result, status) {



                            if (status == window.google.maps.DirectionsStatus.OK) {


                                 fx(result.routes[0]);

                                 polyline[0] = new google.maps.Polyline({
                                     path: [],
                                     strokeColor: '#FFFF00',
                                     strokeWeight: 3
                                     });


                                 poly2[0] = new google.maps.Polyline({
                                     path: [],
                                     strokeColor: '#FFFF00',
                                     strokeWeight: 3
                                     });     


                                var unsortedResult = { order: kk, result: result };
                                unsortedResults.push(unsortedResult);

                                directionsResultsReturned++;

                                if (directionsResultsReturned == batches.length) // we've received all the results. put to map
                                {
                                    // sort the returned values into their correct order
                                    unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
                                    var count = 0;
                                    for (var key in unsortedResults) {
                                        if (unsortedResults[key].result != null) {
                                            if (unsortedResults.hasOwnProperty(key)) {
                                                if (count == 0) // first results. new up the combinedResults object
                                                    combinedResults = unsortedResults[key].result;
                                                else {
                                                    // only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
                                                    // directionResults object, but enough to draw a path on the map, which is all I need
                                                    combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
                                                    combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);

                                                    combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
                                                    combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
                                                }
                                                count++;
                                            }
                                        }
                                    }
                                    dirdis.setDirections(combinedResults);


                                    var legs = combinedResults.routes[0].legs;

                                    var path = combinedResults.routes[0].overview_path;

                                    //alert(path.length);

                                 //  alert(legs.length);

                                  //setRoutes(legs[0].start_location,legs[legs.length-1].end_location);



                                    for (var i=0; i < legs.length;i++)
                                        {
                                              var markerletter = "A".charCodeAt(0);
                                              markerletter += i;
                                      markerletter = String.fromCharCode(markerletter);

                                      if (i == 0) { 

                                        //marker[0] = createMarker2(legs[i].start_location,"start",legs[i].start_address,"green");
                                      }

                                      var steps = legs[i].steps;

                                    //  alert('arrival time : '+legs[i].arrival_time.text);

                                //  var duration = steps.duration_in_traffic;

                                  // alert(duration.text);

                                      for (j=0;j<steps.length;j++) 
                                      {

                                          var nextSegment = steps[j].path;

                                          for (k=0;k<nextSegment.length;k++) 
                                              {
                                              polyline[0].getPath().push(nextSegment[k]);
                                              //bounds.extend(nextSegment[k]);
                                                 }
                                      }



                                    //  createMarker(directionsDisplay.getMap(),legs[i].start_location,"marker"+i,"some text for marker "+i+"<br>"+legs[i].start_address,markerletter);   
                                    }
                                        // Marker for start point 
                                    createMarker(dirdis.getMap(),legs[0].start_location,"marker"+0,"Start Point<br>"+legs[0].start_address,'A');


                                    var i=legs.length;
                                    var markerletter = "A".charCodeAt(0);
                                      markerletter += i;
                                    markerletter = String.fromCharCode(markerletter);

                                    // marker for End Point 
                                    createMarker(dirdis.getMap(),legs[legs.length-1].end_location,"marker"+i,"End Point <br>"+legs[legs.length-1].end_address,'B');

                                    polyline[0].setMap(map);

                                    //startAnimation(0);  
                                }
                            }
                        });
                    })(k);
                }
            }
        };
    }


    var icons = new Array();
    icons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png",
          // This marker is 20 pixels wide by 34 pixels tall.
          new google.maps.Size(20, 34),
          // The origin for this image is 0,0.
          new google.maps.Point(0,0),
          // The anchor for this image is at 9,34.
          new google.maps.Point(9, 34));



    function getMarkerImage(iconStr) {

    //alert(iconStr);

       if ((typeof(iconStr)=="undefined") || (iconStr==null)) { 
          iconStr = "red"; 
       }

    if(iconStr == 'A')
    {
       // for start point 


       if (!icons[iconStr]) {
          icons[iconStr] = new google.maps.MarkerImage("http://www.google.com/mapfiles/dd-start.png",
          // This marker is 20 pixels wide by 34 pixels tall.
          new google.maps.Size(20, 34),
          // The origin for this image is 0,0.
          new google.maps.Point(0,0),
          // The anchor for this image is at 6,20.
          new google.maps.Point(9, 34));
       } 

    }
    if (iconStr == 'B')
    {

        // for end point


        if (!icons[iconStr]) {
              icons[iconStr] = new google.maps.MarkerImage("http://www.google.com/mapfiles/dd-end.png",
              // This marker is 20 pixels wide by 34 pixels tall.
              new google.maps.Size(20, 34),
              // The origin for this image is 0,0.
              new google.maps.Point(0,0),
              // The anchor for this image is at 6,20.
              new google.maps.Point(9, 34));
           } 


        }
    return icons[iconStr];
    }
      // Marker sizes are expressed as a Size of X,Y
      // where the origin of the image (0,0) is located
      // in the top left of the image.

      // Origins, anchor positions and coordinates of the marker
      // increase in the X direction to the right and in
      // the Y direction down.

      var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
          // This marker is 20 pixels wide by 34 pixels tall.
          new google.maps.Size(20, 34),
          // The origin for this image is 0,0.
          new google.maps.Point(0,0),
          // The anchor for this image is at 9,34.
          new google.maps.Point(9, 34));



      var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
          // The shadow image is larger in the horizontal dimension
          // while the position and offset are the same as for the main image.
          new google.maps.Size(37, 34),
          new google.maps.Point(0,0),
          new google.maps.Point(9, 34));
          // Shapes define the clickable region of the icon.
          // The type defines an HTML &lt;area&gt; element 'poly' which
          // traces out a polygon as a series of X,Y points. The final
          // coordinate closes the poly by connecting to the first
          // coordinate.
      var iconShape = {
          coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
          type: 'poly'
      };


    function createMarker(map, latlng, label, html, color) {

    //alert(color);
    //  alert("createMarker("+latlng+","+label+","+html+","+color+")");


        var contentString = '<b>'+label+'</b><br>'+html;


    //    alert('creatMarker'+contentString);


        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            shadow: iconShadow,
            icon: getMarkerImage(color),
            shape: iconShape,
            title: label,
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });
            marker.myname = label;

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString); 
            infowindow.open(map,marker);
            });


        return marker;
    }




          google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    <div id="map_canvas"></div>


  [1]: http://i.stack.imgur.com/yB4Tw.png

#2

Here you go.. the full explaination , credit goes to the author

在这里你去...完整的解释，归功于作者

    function drawMap() {

        var directionDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

    var start = new google.maps.LatLng(51.47482547819850,-0.37739553384529);
    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: start
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    function renderDirections(result) { 
        var directionsRenderer = new google.maps.DirectionsRenderer(); 
        directionsRenderer.setMap(map); 
        directionsRenderer.setDirections(result); 
      }     

    function requestDirections(start, end) { 
      directionsService.route({ 
        origin: start, 
        destination: end, 
        travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }, function(result) { 
        renderDirections(result); 
      }); 
    } 

    requestDirections('(51.47482547819850,-0.37739553384529)', '(51.59512428598160,-0.17190814889409)'); 
    requestDirections('EC1V 0AH', '(51.47615506206120, -0.37795315370703)');  

  }

you need to create an instance of google.maps.DirectionsRenderer(); EVERYTIME you draw the route to make it visible ;)

你需要创建一个google.maps.DirectionsRenderer（）的实例; EVERYTIME你绘制路线使其可见;）

#3

Your directionsDisplay variable is an instance of google.maps.DirectionsRenderer() and that can only hold one set of directions at a time. If you want to display more than one route, you need multiple google.maps.DirectionsRenderer().

您的directionsDisplay变量是google.maps.DirectionsRenderer（）的一个实例，它一次只能包含一组路线。如果要显示多个路线，则需要多个google.maps.DirectionsRenderer（）。

#4

To get multiple routes we can add provideRouteAlternatives = true inside request object while calling route() of DirectionsService object. See Directions Requests.

要获得多个路由，我们可以在调用DirectionsService对象的route（）时在请求对象中添加provideRouteAlternatives = true。请参阅路线请求。

This method will return array of routes if available with their name in summary key.

此方法将返回路径数组（如果可用），其名称在摘要键中。

Now we can display these routes on view and on click of each route we can pass route object and can render the direction by setDirections() of DirectionsRenderer object. See Displaying the DirectionsResult

现在我们可以在视图上显示这些路径，并且点击我们可以传递路径对象的每条路线，并且可以通过DirectionsRenderer对象的setDirections（）渲染方向。请参见显示DirectionsResult