2011-05-18 136 views
9

我想提请基于在谷歌导航服务多条路线,代码低于绘制多个路由谷歌地图

P/S:数据是从我的JSON调用获取列表

for (i = 0; i < 20; i++) { 
route = data[i]; 

start = new google.maps.LatLng(route.from_lat,route.from_lng); 
end = new google.maps.LatLng(route.to_lat,route.to_lng); 

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

var rendererOptions = { 
preserveViewport: true,   
suppressMarkers:true, 
routeIndex:i 
}; 


directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);     
directionsDisplay.setMap(map); 

var directionsService = new google.maps.DirectionsService(); 
directionsService.route(request, function(result, status) { 
    console.log(result); 

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

我似乎无法找到来自论坛的许多相关信息,是我最好的选择,以获得所有的个人交通信息,并再次使用多段线绘制?另外,我如何确保循环仅在我的directionDisplay.setDirections完成时进行?

问候, 安迪

+0

如果什么路线相交然后谷歌地图只显示最新的路线。如何处理这种情况? – 2015-09-04 20:03:01

回答

13

你需要为每个路由单独google.maps.DirectionsRenderer对象。类似的东西:

var routes = [{origin: ..., destination: ...}, {origin: ..., destination: ...}, {origin: ..., destination: ...}]; 
var rendererOptions = { 
    preserveViewport: true,   
    suppressMarkers:true, 
    routeIndex:i 
}; 
var directionsService = new google.maps.DirectionsService(); 

routes.each(function(route){ 
    var request = { 
     origin: route.origin, 
     destination: route.destination, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 

    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
    directionsDisplay.setMap(map); 

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

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

我使用prototype.js,所以你的数组行走的方法可能会有所不同。

+1

如果要避免创建多个方向的对象,也可以将多边形存储在数组中并手动绘制。 – Bytemain 2011-07-27 08:48:03

+0

如果路线相交,则绘制最新的路线=。如何处理这种情况?\ – 2015-09-04 20:00:04

3

我已经获得了基于Google 中的路线服务的多条路线的解决方案更多参考信息click here

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var my={directionsSVC:new google.maps.DirectionsService(),maps:{},routes:{}}; 
    /** 
     * base-class  
     * @param points optional array array of lat+lng-values defining a route 
     * @return object Route 
    **/      
    function Route(points) { 
     this.origin  = null; 
     this.destination = null; 
     this.waypoints = []; 
     if(points && points.length>1) { this.setPoints(points);} 
     return this; 
    }; 

    /** 
     * draws route on a map 
     *    
     * @param map object google.maps.Map 
     * @return object Route 
    **/      
    Route.prototype.drawRoute = function(map) { 
     var _this=this; 
     my.directionsSVC.route(
      {"origin": this.origin, 
      "destination": this.destination, 
      "waypoints": this.waypoints, 
      "travelMode": google.maps.DirectionsTravelMode.DRIVING 
      }, 
      function(res,sts) { 
       if(sts==google.maps.DirectionsStatus.OK){ 
        if(!_this.directionsRenderer) { _this.directionsRenderer=new google.maps.DirectionsRenderer({ "draggable":true }); } 
        _this.directionsRenderer.setMap(map); 
        _this.directionsRenderer.setDirections(res); 
        google.maps.event.addListener(_this.directionsRenderer,"directions_changed", function() { _this.setPoints(); }); 
       } 
      }); 
     return _this; 
    }; 

    /** 
    * sets map for directionsRenderer  
    * @param map object google.maps.Map 
    **/    
    Route.prototype.setGMap = function(map){ this.directionsRenderer.setMap(map); }; 

    /** 
    * sets origin, destination and waypoints for a route 
    * from a directionsResult or the points-param when passed  
    * 
    * @param points optional array array of lat+lng-values defining a route 
    * @return object Route   
    **/ 
    Route.prototype.setPoints = function(points) { 
     this.origin = null; 
     this.destination = null; 
     this.waypoints = []; 
     if(points) { 
      for(var p=0;p<points.length;++p){ 
      this.waypoints.push({location:new google.maps.LatLng(points[p][0], points[p][1]),stopover:false}); 
      } 
      this.origin=this.waypoints.shift().location; 
      this.destination=this.waypoints.pop().location; 
     } 
     else { 
      var route=this.directionsRenderer.getDirections().routes[0]; 
      for(var l=0;l<route.legs.length;++l) { 
      if(!this.origin)this.origin=route.legs[l].start_location; 
      this.destination = route.legs[l].end_location; 

      for(var w=0;w<route.legs[l].via_waypoints.length;++w) { this.waypoints.push({location:route.legs[l].via_waypoints[w], stopover:false});} 
      } 
      //the route has been modified by the user when you are here you may call now this.getPoints() and work with the result 
     } 
     return this; 
    }; 

    /** 
    * retrieves points for a route 
    *   
    * @return array   
    **/ 
    Route.prototype.getPoints = function() { 
     var points=[[this.origin.lat(),this.origin.lng()]]; 

     for(var w=0;w<this.waypoints.length;++w) { points.push([this.waypoints[w].location.lat(), this.waypoints[w].location.lng()]);} 
     points.push([this.destination.lat(), this.destination.lng()]); 
     return points; 
    }; 

    function initialize() { 
     var myOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; 
     my.maps.map1 = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     my.routes.r0 = new Route([[55.930385, -3.118425],[50.909700, -1.40435]]).drawRoute(my.maps.map1); 
     my.routes.r1 = new Route([[51.454513, -2.58790],[52.6308859, 1.2973550]]).drawRoute(my.maps.map1); 

     my.routes.rx=new Route(); 
    } 
    google.maps.event.addDomListener(window, "load", initialize); 
</script> 

<div id="map_canvas" style="height:300px;width:300px;"></div> 
0

在图像ü可以看到一张地图

2条路线上的路线绘制多个路由谷歌地图与航点


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

    var map; 

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

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

    var myPano; 
    var panoClient; 
    var nextPanoId; 


    // var locations=new Array(new google.maps.LatLng(34.04429454929703, -118.22793351693724),new google.maps.LatLng(33.688522885631706, -116.15151750131224)); 


    // var locations2=new Array(
    //  new google.maps.LatLng(32.69561555501597, -117.06338273568724),new google.maps.LatLng(34.525395303965354, -117.27212297006224)); 





     var directionsDisplay = []; 

     directionsDisplay[0] = new window.google.maps.DirectionsRenderer({ 
      suppressMarkers: false, 
      suppressInfoWindows: true 
     }); 


     directionsDisplay[1] = new window.google.maps.DirectionsRenderer({ 
      suppressMarkers: false, 
      suppressInfoWindows: 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(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(map); 





     } 





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



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

          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; 

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

function createMarkerForStops(map, latlng, label, html, color) { 
    // alert("createMarker("+latlng+","+label+","+html+","+color+")"); 


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

     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      title: label, 
      //icon:'http://google-maps-icons.googlecode.com/files/stop.png', 
      icon:'icon/stop.png', 
      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> 
0

如果你拥有一切设置,但只有一条路线出现在您的地图上,问题很可能是您在重新使用之前未将DirectionsRenderer重置为null

每个DirectionsRenderer只能用于渲染一条路径。因此,如果您每次循环访问阵列并创建一个像renderer这样的变量,则必须确保将其重置为null并创建一个新变量。

例如

for (all routes){ 
    directionsRenderer = new google.maps.DirectionsRenderer(optionsDictionary); 
    //call route(), define call back function, etc. 
    directionsRenderer = null; 
}