2011-10-25 11 views
1

に複数のルートがある単一の出所を持つことができる方法や機能はありますか?Google Map Route:複数の目的地を持つ単一の出所

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

EDIT:(混乱し-鬼のための)

例えば

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

は、これまでのところ、私が何をしたか、この、ウェイポイントを使用していた:

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

しかし、問題その解決策があれば、すべての目的地が原点に戻る(BからA、CからAへ)

私が欲しいのは、最初の例のように、次の目的地に行くために、目的地のルートを出発点に戻すことなく、「目的地のみ」です。

ありがとうございました。

更新: 私はこのone(距離行列)を発見したが、距離行列の問題は、それは私が必要なものであるDirectionsService、などの詳細なルート情報を返さないです。

+0

特にあなたが達成しようとしていることは不明です。ルートを視覚化する?何かを計算する?道順を表示しますか? – dmitry

答えて

1

複数のルートを同時にレンダリングすることはできません。私はこのようなものを作った。一度に1つの方向しか示していなかったが、ユーザーがテーブル内の異なる目的地をクリックすると、そのたびに方向が更新された。

<!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> 
+0

こんにちはダンカン、ありがとう、それは私がその間にやったことです。 :)しかし、依然として、私のクライアントは、1つのディスプレイに複数の宛先があるので、私はまだ私の指を横切っています。 – Barry

+0

また、ポリラインとして道案内を作成してみることもできますが、事前に多くの作業が必要になります。固定リストから選択するのではなく、目的地を好きな場所に変更できる場合は機能しない可能性があります。 – duncan