Vorgeschlagene Routenoption in der Google Maps-API?
Ich muss mehrere Routen zwischen Quelle und Ziel anzeigen. ZB: Wenn ich eine Quelle und ein Ziel auswähle, kann ich eine einzelne Route finden. Aber wie in Google Maps haben wir eine vorgeschlagene Routenoption, die ich ebenfalls implementieren muss, aber bei all meinen Versuchen fehlgeschlagen ist. Hier finden Sie den folgenden Code (Arbeitsbeispiel: Zeigt eine einzelne Route zwischen einer Quelle und einem Ziel an). Bitte führen Sie, wenn ich etwas verpasst habe. Danke im Voraus
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Chart</title>
<style>
html,body,#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script> var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map;
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var delhi = new google.maps.LatLng(28.6168, 77.2434);
var mapOptions =
{
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: delhi
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map); } function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++)
{ if (checkboxArray.options[i].selected == true)
{
waypts.push({
location:checkboxArray[i].value,
stopover:true});
}
}
var request =
{
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, 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>';
}
} });
} google.maps.event.addDomListener(window, 'load', initialize); </script>
</head>
<body>
<div id="map-canvas" style="float: left; width: 70%; height: 100%;"></div>
<div id="control_panel"
style="float: right; width: 30%; text-align: left; padding-top: 20px">
<div style="margin: 20px; border-width: 2px;"><b>Loco Journey Start Station:</b> <select
id="start">
<option value="Tughlakabad">Panvel</option>
<option value="Lucknow">Lucknow</option>
<option value="Firozpur">Firozpur</option>
<option value="Ghaziabad">Ghaziabad</option>
</select> <br>
<b>Journey:</b> <br>
<i>(Ctrl-Click for multiple selection)</i> <br>
<select multiple id="waypoints">
<option value="Bhopal">Bhopal</input>
<option value="Raipur">Raipur</input>
<option value="Farukkhabad">Farukkhabad</input>
<option value="Jhansi">Jhansi</input>
</select> <br>
<b>Loco Journey End Station:</b> <select id="end">
<option value="Lucknow">Lucknow</option>
<option value="Firozpur">Firozpur</option>
<option value="Ghaziabad">Ghaziabad</option>
<option value="Tughlakabad">Tughlakabad</option>
</select> <br>
<input type="submit" onclick="calcRoute();"></div>
<div id="directions_panel"
style="margin: 20px; background-color: #FFEE77;"></div>
</div>
</body>
</html>