在谷歌地圖上顯示多條路線

Question

我試圖在谷歌地圖上顯示多條路線，但它只顯示一條。你能否請我做錯什麼？

<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"); 

能否請你讓我知道我做錯了什麼？

Answer 1

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

點擊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 

Answer 2

您的directionsDisplay變量是google.maps.DirectionsRenderer()的一個實例，並且一次只能保存一組方向。如果您想要顯示多條路線，則需要多個google.maps.DirectionsRenderer()。

Answer 3

在這裏，你去.. the full explaination，歸功於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)'); 

    } 

您需要創建繪製的路線，以使其可見google.maps.DirectionsRenderer();每次的實例;）

Answer 4

要獲得多個路線我們可以添加provideRouteAlternatives = true內部的請求對象，同時調用route()的DirectionsService對象。見Directions Requests。

該方法將返回路由數組（如果可用，則其名稱爲summary）。

現在我們可以在視圖上顯示這些路線並點擊每條路線我們可以傳遞路線對象，並且可以通過setDirections()來渲染DirectionsRenderer對象的方向。請參閱Displaying the DirectionsResult