Javascript 将选择更改为输入字段

Javascript 将选择更改为输入字段,javascript,google-maps-api-3,directions,Javascript,Google Maps Api 3,Directions,我有这个代码片段,用于谷歌地图的路线计算 <div id="map"></div> <div id="right-panel"> <div> <b>Standort:</b> <select id="start"> <option value="Frankfurt">Frankfurt</option> <

我有这个代码片段,用于谷歌地图的路线计算

<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>
但它不起作用。有解决这个问题的办法吗

有可能求和得到完整的距离吗?现在输出给我每条路线的距离

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

提前感谢

属性必须是数组

阅读

上面的代码只是将两个字符串连接成一个字符串。一个非常简单的
console.log(waypts)
将有助于解决这个问题

如果输入的纬度是
10
,而经度是
20
,则上述将记录
1020

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

您没有发布所有相关代码。您好,MrUpsidown,我已经添加了其余代码。发布的代码出现javascript错误
Uncaught TypeError:无法读取null的属性“length”
相关问题:
var waypts = LadeValue + AbLadeValue;
var waypts = [LadeValue, AbLadeValue]; // This is an array