SELECTをINPUTフィールドに変更する

Question

Googleマップでのルート計算にこのコードスニペットがあります。

<div id="map"></div> 
<div id="right-panel"> 
    <div> 
    <b>Standort:</b> 
     <select id="start"> 
      <option value="Frankfurt">Frankfurt</option> 
      <option value="Duisburg">Duisburg</option> 
     </select> 
     <br> 
     <b>Punkt 1:</b> <br> 
     <input id="wayp1"> 
     <br> 
     <b>Punkt 2:</b> 
     <input id="wayp2"> 
     <br> 
     <select id="end"> 
      <option value="Frankfurt">Frankfurt</option> 
      <option value="Duisburg">Duisburg</option> 
     </select> 
      <input type="submit" id="submit"> 
    </div> 
    <div id="directions-panel"></div> 
    </div> 

</div><!-- #primary --> 
<script> 
    function initMap() { 
    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: {lat: 50.81, lng: 6.83} 
    }); 
    directionsDisplay.setMap(map); 

    document.getElementById('submit').addEventListener('click', function() { 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
    }); 
    } 

function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
var waypts = []; 
var checkboxArray = document.getElementById('waypoints'); 
for (var i = 0; i < checkboxArray.length; i++) { 
    if (checkboxArray.options[i].selected) { 
    waypts.push({ 
    location: checkboxArray[i].value, 
    stopover: true 
    }); 
} 
} 

directionsService.route({ 
    origin: document.getElementById('start').value, 
    destination: document.getElementById('end').value, 
    waypoints: waypts, 
    optimizeWaypoints: true, 
    travelMode: 'DRIVING' 
}, function(response, status) { 
    if (status === '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>'; 
    } 
    } else { 
    window.alert('Directions request failed due to ' + status); 
    } 
}); 
</script> 

選択フィールドによってウェイポイントが追加されます。これを入力フィールドに変更します。

だから私は、2つの入力フィールド(wayp1 & wayp2)を作成し、これをwaypts一部を置き換え：

function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
    var LadeValue = document.getElementById('wayp1').value; 
    var AbLadeValue = document.getElementById('wayp2').value; 
    var waypts = LadeValue + AbLadeValue; 

しかし、それは動作しません。この問題を解決する答えはありますか？

完全な距離を合計で取得することは可能ですか？今、出力は私に、各ルートごとに距離を与える事前

Answer 1

で

(start->waypoint 1->waypoint 2->end). 

おかげでDirectionsRequestオブジェクトwaypointsプロパティが配列でなければなりません。

はdocumentation

var waypts = LadeValue + AbLadeValue; 

読むどのようなあなたの上記のコードは一つにちょうど2つの文字列を連結されてい。非常に単純なconsole.log(waypts)は、この問題の解決に役立ちました。

入力された緯度が10で、経度が20の場合、上記はログに1020と記録されます。

var waypts = [LadeValue, AbLadeValue]; // This is an array