使用Directions API仅显示航点
我正在使用带有Waypoint的Directions API,as this doc,用于出租车服务 .
我需要起始地址和结束地址来计算驾驶成本,但我只需要显示航点的 Map .
我管理如何检索我想要的信息,但我不知道如何仅使用路标显示 Map ,而不知道如何使用起点和终点地址 .
我举个例子 . 我的出租车在帝国大厦,所以这些是我的开始和结束地址,我的客户想要从华盛顿广场到纽约法拉盛梅多斯 .
计算来自A> B> C,来自B> C的信息,但是显示是A> B> C> D,我只想要B> C
除了检索信息之外,我使用与文档完全相同的代码 . 我知道我必须管理directionsDisplay,但我无法弄清楚如何 .
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 46.166213, lng: -1.3791688}
});
directionsDisplay.setMap(map);
document.getElementById('calculate').addEventListener('click', function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
$('#waypoints input').each(function(e){
waypts.push({
location: $(this).val(),
stopover: true
});
});
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
waypoints: waypts,
optimizeWaypoints: false,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
/* This is the display I need to change ! */
directionsDisplay.setDirections(response);
var route = response.routes[0];
$('.show-result').show();
$('.start_address').html(route.legs[1].start_address);
$('.end_address').html(route.legs[1].end_address);
$('.distance_qty').html(route.legs[1].distance.text);
$('.time_spend').html(route.legs[1].duration.text);
var money_spend = (route.legs[0].distance.value + route.legs[1].distance.value)/1000 * 1.5;
$('.money_amount').html(money_spend.toFixed(2));
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
console.log(route.legs[i]);
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
<div id="map"></div>
回答(0)