尝试通过航路点获得最短路线。我可以画出最短的路线，但不能重跑里程？

Question

因此，我能够为我的网站的出租车价格表单加码大量代码。我确实有航点，但能够找到最短的路线（当没有输入任何航点时。但是，地图仅绘制最短的路线，但没有返回路线值，有什么帮助吗？非常感谢，我绝对没有编码经验，并且能够到目前为止，没有任何调试就构建了它，因此任何帮助都将非常棒！

  <script>

function show_selected() {
    var selector = document.getElementById('id_of_select');
    var value = selector[selector.selectedIndex].text;

    document.getElementById('display').innerHTML = value;
}

document.getElementById('submit').addEventListener('click', show_selected);;

function myFunction() {
var x = document.getElementById("via1x");
    if (x.style.display === "none") {
        x.style.display = "block";
    }

}
function myFunction1() {
    var x = document.getElementById("via2x");
    if (x.style.display === "none") {
        x.style.display = "block";
    } 

}

function myFunction2() {
    var x = document.getElementById("via1x").style.display = "none";
    var y = document.getElementById("via1").value = "";
    
}
function myFunction3() {
    var x = document.getElementById("via3x");
    if (x.style.display === "none") {
        x.style.display = "block";
    } 

}

function myFunction4() {
    var x = document.getElementById("via2x").style.display = "none";
    var y = document.getElementById("via2").value = "";
}
function myFunction5() {
    var x = document.getElementById("via4x");
    if (x.style.display === "none") {
        x.style.display = "block";
    } 

}

function myFunction6() {
    var x = document.getElementById("via3x").style.display = "none";
    var y = document.getElementById("via3").value = "";
}
function myFunction7() {
    var x = document.getElementById("via5x");
    if (x.style.display === "none") {
        x.style.display = "block";
    } 

}

function myFunction8() {
    var x = document.getElementById("via4x").style.display = "none";
    var y = document.getElementById("via4").value = "";
}

function myFunction9() {
    var x = document.getElementById("via5x").style.display = "none";
    var y = document.getElementById("via5").value = "";
}


  
  function initAutocomplete() {
        
var options = {
  
  componentRestrictions: {country: "gb"}
 };
        var input = document.getElementById('start');
        var searchBox = new google.maps.places.Autocomplete(input, options);
        
        var input = document.getElementById('via1');
        var searchBox = new google.maps.places.Autocomplete(input, options);
        
        var input = document.getElementById('via2');
        var searchBox = new google.maps.places.Autocomplete(input, options);
        
        var input = document.getElementById('via3');
        var searchBox = new google.maps.places.Autocomplete(input, options);
        
        var input = document.getElementById('via4');
        var searchBox = new google.maps.places.Autocomplete(input, options);
        
        var input = document.getElementById('via5');
        var searchBox = new google.maps.places.Autocomplete(input, options);
       
        
        
        var input = document.getElementById('end');
        var searchBox = new google.maps.places.Autocomplete(input, options);
        }
  
  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: 51.4545,
      lng: -2.5879
    }
  });
  directionsDisplay.setMap(map);

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

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

  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,

    waypoints: waypts,
    optimizeWaypoints: false,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,  
provideRouteAlternatives: true,
                unitSystem: google.maps.UnitSystem.IMPERIAL,  
                avoidHighways: false,  
                avoidTolls: false,

  }, function(response, status) {
    if (status === 'OK') {
     
var distance = null;
        var routeIndex = 0;

        // Loop through the routes to find the shortest one
        for (var i=0; i<response['routes'].length; i++) {

            var routeDistance = response['routes'][i].legs[0].distance.value;

            if (distance === null) {

                distance = routeDistance;
                routeIndex = i;
            }

            if (routeDistance < distance) {

                distance = routeDistance;
                routeIndex = i;
            }
        }

 directionsDisplay.setDirections(response);

directionsDisplay.setOptions({ 
            routeIndex: routeIndex
        });
      var route = response.routes[0];
      var summaryPanel = document.getElementById('dis');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
var miles =new Number(0);

//var kk=document.getElementById('dis');
//kk.innerHTML='hi';

 for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
   
miles+=Number.parseFloat((route.legs[i].distance.text));
      
       summaryPanel.innerHTML =miles.toFixed(1);

     }

    } else {
      window.alert('Directions request failed due to ' + status);
    }
var price =new Number(0);
price=(miles*2.14)+4.50;
//alert(price);
document.getElementById('price').innerHTML=price.toFixed(2);

  });

}

google.maps.event.addDomListener(window, "load", initMap);

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvcB4ApVv_q2Sg-BURaMCkFJTH-WdIe5I&libraries=places&callback=initAutocomplete"
         async defer></script>

<style>
#map,
#mp {

  height: 300px;
  width: 300px;
  margin: 0px;
  padding: 0px
}
#start{
width:50%;}
#via1{
width:50%;}
#via2{
width:50%;}
#via3{
width:50%;}
#via4{
width:50%;}
#via5{
width:50%;}
#end{
width:50%;}
#via5btn{width:24px;}
#startbtn{width:49px;}
#rslt{padding-left:38px;}
</style>

<div id="mp">
    <div>
<div class="address-form" id="address1">
      <span>Start:</span>
      <input id="start" type="text" value="">
<button id="startbtn" onclick="myFunction()">+ via</button>
</div>
<div class="address-form" id="via1x" style="display:none">
      <span>Via:    &nbsp;  </span>
      <input id="via1" class="waypoints" value="" />
<button onclick="myFunction1()">+</button>
	<button onclick="myFunction2()">-</button>
</div>

<div class="address-form" id="via2x" style="display:none">
<span>Via:    &nbsp;  </span>
      <input id="via2" class="waypoints" value="" />
<button onclick="myFunction3()">+</button>
	<button onclick="myFunction4()">-</button>
</div>

<div class="address-form" id="via3x" style="display:none">
<span>Via:    &nbsp;  </span>
      <input id="via3" class="waypoints" value="" />
<button onclick="myFunction5()">+</button>
	<button onclick="myFunction6()">-</button>
</div>

<div class="address-form" id="via4x" style="display:none">
<span>Via:    &nbsp;  </span>
      <input id="via4" class="waypoints" value="" />
<button onclick="myFunction7()">+</button> <button onclick="myFunction8()">-</button>
</div>

<div class="address-form" id="via5x" style="display:none">
<span>Via:    &nbsp;  </span>
      <input id="via5" class="waypoints" value="" />  
<button  id="via5btn" onclick="myFunction9()">-</button>
	</div>

<div class="address-form">
      <span>End:&nbsp;</span>
      <input id="end" type="text" value=""><br>
</div>
<br>
<select id="id_of_select">
<option></option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>



<div id="display"></div>
<br>

<div id="rslt">
       <button type="submit" id="submit" onclick="show_selected()">Submit</button>&nbsp; <button onClick="window.location.reload()">Clear All</button>
<br>
<label>Miles: &nbsp;&nbsp;</label><label id="dis">0 </label>
<br>
<label> Price: £</label>
<label id="price"> 0</label>
</div>
</div>
    
  <br>
  <div id="directions-panel" ></div>


<div id="map"></div>

`