2

我想在同一张地图上查看不同的路线。我将从文件中加载路线并将它们放在两个数组“start”和“end”中。calcRoute 将数组 start 和 end 作为路由的起点和终点。我迭代此函数(在本例中为两次)以创建两条路线。但它只能看到最后一个。我想查看数组内的所有路由。

var directionsDisplay;

var rendererOptions = {
            preserveViewport: true,
            draggable: false,
            suppressMarkers: true,
            polylineOptions: {
               map: map,
               strokeColor:'#FF0000',
               //strokeWidth: 3,
               strokeOpacity: 0.7}

};

var start = ['Trento, via belenzani 11', 'Trento, piazza duomo']
var end = ['Trento, via belenzani 50', 'Trento, piazza pasi']
var map;

function initialize() {


  var trento = new google.maps.LatLng(46.066712,11.119059);
  var myOptions = {
    zoom:12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: trento
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  for (var i=0; i < 2; i++){
  calcRoute(start[i], end [i]);
}
directionsDisplay.setMap(map);
  }


function calcRoute(source,destination){
        // show route between the points
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
        directionsDisplay.setMap(map);
        var request = {
            origin:source, 
            destination:destination,
            travelMode: google.maps.DirectionsTravelMode.WALKING
        };
        directionsService.route(request, function(response, status) 
        {
            if (status == google.maps.DirectionsStatus.OK) 
            {
                directionsDisplay.setDirections(response);

            }
        });

      }
4

2 回答 2

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

Click [here](http://i.stack.imgur.com/yB4Tw.png )!


    ![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


  [1]: http://i.stack.imgur.com/ld0j7.png
于 2014-02-04T09:45:58.043 回答
-1

首先,您的 for 循环不正确:

for (var k; k<0;k++){
  calcRoute(percorso[k], percorso[k+1]);
  k++;
}

这可能对你有用

干杯

于 2012-05-21T08:58:55.433 回答