1

ターンバイターン方式の経路案内を提供する運転経路案内アプリがあります。開始、終了、およびウェイポイントは、次のようなフォームから取得されます。

    <b>Start</b>
    <select id="startdrop" name="startthere">
    ALL MY OPTIONS
    <option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option>
    </select>

    Stops Along the Way
    <select multiple id="waypoints" name="waypointsselected[]">
    <option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option>
    </select>           

    <b>End</b>
    <select id="enddrop" name="endthere">
    ALL MY OPTIONS
    <option selected value="COMPLETEADDRESS"><%= LOCATIONNAME %></option>
    </select>

私の目標は、LOCATIONNAME を各ポイントの情報ウィンドウとルート概要に表示することです。開始からウェイポイント、終了までのすべてのポイントについて、要約は次のようになります。

    A Great House
    136 Utica Ave, Brooklyn, NY 11213, USA to 

    Knights Baptist Church
    180 Utica Ave, Brooklyn, NY 11213

私の試みについては、以下を参照してください。現在の問題：「StartText」はすべてのルートで同じであり、配列が空であるため、ウェイポイントはJavaScriptを壊します：

ジャバスクリプト

    function calcRoute() {
          var start = document.getElementById("startdrop").value;
          var startSelect = document.getElementById("startdrop");
          var startText = startSelect.options[startSelect.selectedIndex].text;
          var end = document.getElementById("enddrop").value;
          var endSelect = document.getElementById("enddrop");
          var endText = startSelect.options[endSelect.selectedIndex].text;
              var waypts = [];
          var waypointText = [];
          var checkboxArray = document.getElementById("waypoints");
          for (var i = 0; i < checkboxArray.length; i++) {
             waypts.push({
                  location:checkboxArray[i].value,
                  waypointText:checkboxArray[i].text,
                  stopover:true
              });
         }

   var request = {
              origin: start,
              destination: end,
              waypoints: waypts,
              optimizeWaypoints: optimize,
              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 += startText + "</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 />";
                summaryPanel.innerHTML += route.legs[i].duration.text + "<br /><br />";

編集 1

マップの再作成に関する情報がいくつかあります ( Google マップ V3 - ウェイポイント + ランダム テキストを含む情報ウィンドウ)。

4

1 に答える 1

0

DirectionsStep オブジェクトには、end_location というプロパティがあります。この値を取得して、情報ウィンドウに表示できますか?

https://developers.google.com/maps/documentation/javascript/reference#DirectionsLeg

于 2013-09-06T08:41:04.403 に答える