-1
對不起，因爲這可能很基本，但我不太清楚語法。依靠指定對象的select選項創建if/else Javascript語句
我想選擇一個對象，取決於通過html選擇哪個選項。這是由於谷歌地圖api的限制（過境不能使用航點）。到目前爲止，我做得很好，但這個特別的部分正在逃避我。
我已經評論了兩個對象，我想在下面的代碼中使用if/else語句。
謝謝。
<div id="map" style="float:left;width:100%;height:100%;max-width:650px;max-height:500px;margin-left:auto;margin-right:auto;margin-bottom:10px;"></div>
<div id="control_panel" style="width:500px; text-align:left;" class="panel">
<div style="margin:20px;border-width:2px;" class="panel">
<br>
<b>Start:</b><br>
<input id="start" value="Glasgow" type="text"><br><br>
<b>Route:</b>
<!-- The "via" route selector that will effect the javascript object -->
<select id="waypoints" required>
<option disabled selected>Please select</option>
<option value="Birmingham, uk">Direct to venue</option>
<option value="Newcastle, uk">Shuttle Bus A</option>
<option value="Sheffield, uk">Shuttle Bus B</option>
</select>
<!-- end selector -->
<br><br>
<b>End:</b>
<select id="end">
<option value="51.479378, -0.315518">syon park hilton hotel, uk</option>
</select>
<br><br>
<input type="submit" id="submit">
</div>
<div id="directions_panel" class="panel" style="margin:20px;background-color:#FFEE77;"></div>
</div>
<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: 12,
center: {lat: 51.479242, lng: -0.315963},
});
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
});
}
}
// If statemnt in question here
if(document.getElementById('waypoints').value == "Birmingham, uk") {
directionsService.route({
//Object 1 for using cars
origin: document.getElementById('start').value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
});
} else {
//Object 2 for other routes, all using transit
directionsService.route({
origin: document.getElementById('start').value,
travelMode: google.maps.TravelMode.TRANSIT
});
},
function(response, status) {
if (status === google.maps.DirectionsStatus.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>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
你有語法錯誤在你發佈的代碼並沒有'destination'在爲DirectionsService請求。請發佈證明此問題的[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve）。 – geocodezip