, так что я смог собрать кучу кода для формы тарификации такси для моего сайта.у меня есть путевые точки, но я смог найти кратчайший маршрут (когда не введены никакие путевые точки. Однако карта рисует только кратчайший маршрут, но не изменяет значения маршрута, какая-то помощь?постройте это до сих пор без какой-либо отладки, так что любая помощь будет потрясающей! `
<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: </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: </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: </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: </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: </span>
<input id="via5" class="waypoints" value="" />
<button id="via5btn" onclick="myFunction9()">-</button>
</div>
<div class="address-form">
<span>End: </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> <button onClick="window.location.reload()">Clear All</button>
<br>
<label>Miles: </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>
`