谷歌地圖路線：多個目的地的單一出發地

Google地圖中是否有任何方式或功能，允許您擁有多個方向的單一出發地的？谷歌地圖路線：多個目的地的單一出發地

例如

A --> B 
A --> C 
A --> D

編輯：（用於迷惑惡魔）

如

--> B   
A |--> C 
    --> D

到目前爲止，我所做的就是這一點，使用的航點：

A --> B --> A --> C --> A --> D

但問題這個解決方案是，每個目的地都回到原點（B到A，C到A）

我想要的只是起源「到目的地」而不顯示目的地的路線回到原點而僅僅是像第一個例子那樣去到下一個目的地。

謝謝。

更新： 我發現這個one（距離矩陣），但距離矩陣的問題是它沒有返回路由的詳細信息，如爲DirectionsService，這正是我需要的。

來源

2011-10-25 Barry

目前尚不清楚你正試圖達到什麼目標。可視化路線？計算一些東西？顯示路線？ – dmitry

我不認爲有可能同時呈現多個方向。我建立了類似這樣的方式，我一次只顯示一個方向，但當用戶點擊表格中的不同目的地時，我每次都更新方向。

<!DOCTYPE html> 
<html> 
<head> 
<title>Driving directions between markers</title> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map_canvas { height: 100% } 
</style> 

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

<script type="text/javascript"> 
    var directionsService = new google.maps.DirectionsService(); 
    var directionsDisplay; 
    var arrLatLon = []; 
    var homeLatlng; 
    var destinationID; 

    function initialize() { 
     homeLatlng = new google.maps.LatLng(54.42838,-2.9623); 

     var myOptions = { 
      zoom: 10, 
      center: homeLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var infowindow = new google.maps.InfoWindow({ 
      content: '' 
     }); 

     directionsDisplay = new google.maps.DirectionsRenderer({ 
      draggable: true, 
      map: map, 
      markerOptions: { 
       draggable: true 
      }, 
      panel: document.getElementById("directionsPanel"), 
      infoWindow: infowindow 
     }); 

     var i, row; 
     var len = 4; 

      row = 1; 
      arrLatLon[row] = new google.maps.LatLng(54.60039,-3.13632); 

      row = 2; 
      arrLatLon[row] = new google.maps.LatLng(54.36897,-3.07561); 

      row = 3; 
      arrLatLon[row] = new google.maps.LatLng(54.5003526,-3.0844116); 

      row = 4; 
      arrLatLon[row] = new google.maps.LatLng(54.57723,-2.79748); 


      google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { 
      computeTotalDistance(directionsDisplay.directions); 
     }); 

     // only seems possible to display 1 directions at a time? 
     calcRoute(1); 
    } 

    function calcRoute(id) { 
     var selectedMode = document.getElementById("mode").value; 
     var selectedUnits = document.getElementById("units").value; 

     if(typeof(id) != "undefined"){ 
      destinationID = id; 
     } 

     var request = { 
      origin:homeLatlng, 
      destination:arrLatLon[destinationID], 
      travelMode: google.maps.DirectionsTravelMode[selectedMode], 
      unitSystem: google.maps.UnitSystem[selectedUnits] 
     }; 

     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
      } 
     }); 
    } 

    function computeTotalDistance(result) { 
     var total = 0; 
     var myroute = result.routes[0]; 
     for (i = 0; i < myroute.legs.length; i++) { 
      total += myroute.legs[i].distance.value; 
     } 
     total = total/1000; 

     var selectedUnits = document.getElementById("units").value; 

     if (selectedUnits == "IMPERIAL") { 
      document.getElementById("total").innerHTML = (Math.round((total* 0.6214)*100)/100) + " miles"; 
     } else { 
      document.getElementById("total").innerHTML = total + " kilometres"; 
     } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
    <div id="map_canvas" style="float:left;width:70%;height:60%"></div> 

    <div id="directionsPanel" style="float:right;width:30%;height:60%"></div> 

    <p>Total Distance: <span id="total"></span></p> 

    <h2>Use the map below to see destinations near Ambleside</h2> 
    <h3>More destinations near Ambleside</h3> 

    <table id="tableNeighbours" border="1"> 
     <tr> 
      <th>Destination</th> 
      <th colspan="2">Distance from Ambleside</th> 
     </tr> 

      <tr> 
       <td><a href="#" onclick="calcRoute(1); return false;">Keswick</a></td> 

       <td>22.2 kilometres</td> 
       <td>13.8 miles</td> 
      </tr> 

      <tr> 
       <td><a href="#" onclick="calcRoute(2); return false;">Coniston</a></td> 
       <td> 9.9 kilometres</td> 

       <td> 6.2 miles</td> 
      </tr> 

      <tr> 
       <td><a href="#" onclick="calcRoute(3); return false;">Lake District</a></td> 
       <td>11.3 kilometres</td> 
       <td> 7.0 miles</td> 

      </tr> 

      <tr> 
       <td><a href="#" onclick="calcRoute(4); return false;">Cumbria</a></td> 
       <td>19.7 kilometres</td> 
       <td>12.2 miles</td> 
      </tr> 

    </table> 

    <div> 
     <strong>Mode of Travel: </strong> 
     <select id="mode" onchange="calcRoute()"> 
      <option value="DRIVING" selected="selected">Driving</option> 
      <option value="WALKING">Walking</option> 
     </select> 
    </div> 

    <div> 
     <strong>Measurement units: </strong> 
     <select id="units" onchange="calcRoute()"> 
      <option value="IMPERIAL" selected="selected">Miles</option> 
      <option value="METRIC ">Kilometres</option> 
     </select> 
    </div> 
</body> 
</html>

來源

2011-10-25 09:26:15 duncan

嗨鄧肯，謝謝，這其實是我在此期間所做的。 :)但仍然，我的客戶在一個顯示器中顯示多個目的地，所以我仍然穿過我的手指。 – Barry

或者，您可以嘗試將方向創建爲多段線，但這需要提前做更多工作，如果用戶可以將目的地更改爲他們喜歡的任何位置，則可能不起作用，而不是從固定列表中選取。 – duncan

谷歌地圖路線：多個目的地的單一出發地

回答

相關問題