將SELECT更改爲INPUT字段

-2

我已經得到此代碼段，用於使用Google地圖進行路線計算。將SELECT更改爲INPUT字段

<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>

Waypoints通過選擇字段添加。現在我想將其更改爲輸入字段。

因此，我創建2個輸入字段(wayp1 & wayp2)並取代了waypts部分與此：

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

但它不工作。有沒有解決這個問題的答案？

是否有可能獲得總和的完整距離？眼下輸出給我的距離每每條路線預先

來源

2017-05-22 THColonia

您沒有發佈所有相關的代碼。 – MrUpsidown

你好MrUpsidown，我補充了其餘的。 – THColonia

我得到了張貼代碼'遺漏的類型錯誤JavaScript錯誤：無法讀取null' – geocodezip

的DirectionsRequest對象waypoints屬性

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

由於必須是一個數組。

閱讀documentation

var waypts = LadeValue + AbLadeValue;

什麼你上面的代碼確實只是串聯2串爲一體。一個非常簡單的console.log(waypts)將有助於解決這個問題。

如果輸入的緯度是10而經度是20那麼以上將記錄1020。

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

來源

2017-05-23 07:08:25 MrUpsidown

將SELECT更改爲INPUT字段

回答

相關問題