Google Maps API中的推薦路線選項？

我有要求顯示源和目標之間的多個路由。例如：如果我選擇一個來源和目的地，我可以找到一條路線。但在谷歌地圖，我們有一個建議的路線選項，這是我需要實現，但我失敗了所有我的嘗試。請找到下面的代碼（例如，工作中顯示源和目標之間的單一路由）。請指導如果我錯過了什麼。由於事先Google Maps API中的推薦路線選項？

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<title>Chart</title> 
<style> 
html,body,#map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
} 

#panel { 
    position: absolute; 
    top: 5px; 
    left: 50%; 
    margin-left: -180px; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
} 
</style> 
<script 
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; 
function initialize() 
{ 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var delhi = new google.maps.LatLng(28.6168, 77.2434); 
    var mapOptions = 
     {  
      zoom: 6,  
      mapTypeId: google.maps.MapTypeId.ROADMAP,  
      center: delhi 
     } 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     directionsDisplay.setMap(map); } function calcRoute() { 
     var start = document.getElementById('start').value; 
     var end = document.getElementById('end').value; 
     var waypts = []; 
     var checkboxArray = document.getElementById('waypoints'); 
     for (var i = 0; i < checkboxArray.length; i++) 
      {  if (checkboxArray.options[i].selected == true) 
       {  
       waypts.push({   
       location:checkboxArray[i].value,   
       stopover:true});  
       } 
      }  
     var request = 
      {  
       origin: start,  
       destination: end,  
       waypoints: waypts,  
       optimizeWaypoints: true,  
       travelMode: google.maps.TravelMode.DRIVING 
      }; 
     directionsService.route(request, function(response, status) 
       {  
        if (status == google.maps.DirectionsStatus.OK) 
         {  
          directionsDisplay.setDirections(response);  
          var route = response.routes[0];  
          var summaryPanel = document.getElementById('directions_panel');  
          summaryPanel.innerHTML = '';  // For each route, display summary information.  
          for (var i = 0; i < route.legs.length; i++) 
          {   
           var routeSegment = i + 1;   
           summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';   
           summaryPanel.innerHTML += route.legs[i].start_address + ' to ';   
           summaryPanel.innerHTML += route.legs[i].end_address + '<br>';   
           summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';  
          }  
} }); 
} google.maps.event.addDomListener(window, 'load', initialize);  </script> 
</head> 
<body> 
<div id="map-canvas" style="float: left; width: 70%; height: 100%;"></div> 
<div id="control_panel" 
    style="float: right; width: 30%; text-align: left; padding-top: 20px"> 
<div style="margin: 20px; border-width: 2px;"><b>Loco Journey Start Station:</b> <select 
    id="start"> 
    <option value="Tughlakabad">Panvel</option> 
    <option value="Lucknow">Lucknow</option> 
    <option value="Firozpur">Firozpur</option> 
    <option value="Ghaziabad">Ghaziabad</option> 
</select> <br> 
<b>Journey:</b> <br> 
<i>(Ctrl-Click for multiple selection)</i> <br> 
<select multiple id="waypoints"> 
    <option value="Bhopal">Bhopal</input> 
    <option value="Raipur">Raipur</input> 
    <option value="Farukkhabad">Farukkhabad</input> 
    <option value="Jhansi">Jhansi</input> 
</select> <br> 
<b>Loco Journey End Station:</b> <select id="end"> 
    <option value="Lucknow">Lucknow</option> 
    <option value="Firozpur">Firozpur</option> 
    <option value="Ghaziabad">Ghaziabad</option> 
    <option value="Tughlakabad">Tughlakabad</option> 
</select> <br> 
<input type="submit" onclick="calcRoute();"></div> 
<div id="directions_panel" 
    style="margin: 20px; background-color: #FFEE77;"></div> 
</div> 
</body> 
</html>

來源

2013-10-30 sTg

from the documentation：

provideRouteAlternatives（可選）設置爲true時指定路線服務可以在響應中提供一個以上的的替代路線。請注意，提供路由選擇可能會增加服務器的響應時間。

example

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

來源

2013-10-30 09:06:11 geocodezip

Google Maps API中的推薦路線選項？

回答

相關問題