<html>
<head>
<meta name="viewport" content="initial-scale=10, user-scalable=no">
<meta charset="utf-8">
<title>Waypoints in directions</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
float: left;
width: 70%;
height: 100%;
}
#right-panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#right-panel select, #right-panel input {
font-size: 15px;
}
#right-panel select {
width: 100%;
}
#right-panel i {
font-size: 12px;
}
#right-panel {
margin: 20px;
border-width: 2px;
width: 20%;
float: left;
text-align: left;
padding-top: 20px;
}
#directions-panel {
margin-top: 20px;
background-color: #FFEE77;
padding: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>
<select id="start">
<option value="Halifax, NS">Halifax, NS</option>
<option value="Boston, MA">Boston, MA</option>
<option value="New York, NY">New York, NY</option>
<option value="Miami, FL">Miami, FL</option>
</select>
<br>
<b>Waypoints:</b> <br>
<i>(Ctrl-Click for multiple selection)</i> <br>
<select multiple id="waypoints">
<option value="montreal, quebec">Montreal, QBC</option>
<option value="toronto, ont">Toronto, ONT</option>
<option value="chicago, il">Chicago</option>
<option value="winnipeg, mb">Winnipeg</option>
<option value="fargo, nd">Fargo</option>
<option value="calgary, ab">Calgary</option>
<option value="spokane, wa">Spokane</option>
</select>
<br>
<b>End:</b>
<select id="end">
<option value="Vancouver, BC">Vancouver, BC</option>
<option value="Seattle, WA">Seattle, WA</option>
<option value="San Francisco, CA">San Francisco, CA</option>
<option value="Los Angeles, CA">Los Angeles, CA</option>
</select>
<br>
<input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
<script>
function initMap() {
var directionsService = new googlemapsDirectionsService;
var directionsDisplay = new googlemapsDirectionsRenderer;
var map = new googlemapsMap(documentgetElementById('map'), {
zoom: 6,
center: {lat: 4185, lng: -8765}
});
directionsDisplaysetMap(map);
documentgetElementById('submit')addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var checkboxArray = documentgetElementById('waypoints');
for (var i = 0; i < checkboxArraylength; i++) {
if (checkboxArrayoptions[i]selected) {
wayptspush({
location: checkboxArray[i]value,
stopover: true
});
}
}
directionsServiceroute({
origin: documentgetElementById('start')value,
destination: documentgetElementById('end')value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: googlemapsTravelModeDRIVING
}, function(response, status) {
if (status === googlemapsDirectionsStatusOK) {
directionsDisplaysetDirections(response);
var route = responseroutes[0];
var summaryPanel = documentgetElementById('directions-panel');
summaryPanelinnerHTML = '';
// For each route, display summary information
for (var i = 0; i < routelegslength; i++) {
var routeSegment = i + 1;
summaryPanelinnerHTML += '<b>Route Segment: ' + routeSegment +
'</b><br>';
summaryPanelinnerHTML += routelegs[i]start_address + ' to ';
summaryPanelinnerHTML += routelegs[i]end_address + '<br>';
summaryPanelinnerHTML += routelegs[i]distancetext + '<br><br>';
}
} else {
windowalert('Directions request failed due to ' + status);
}
});
}
</script>
<script src=">
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）