我正在网络应用程序中,我需要添加取货地址,送客地址和一个访问区域的数组,通过它用户将在拾取和下降之间移动地址。我所做的是路线图,并计算出取车和下车地址之间的距离,但我无法将取车和下车的访问地点匹配。 这里是我的代码,如果我任何人都可以给我一个想法如何做到这一点:计算距离并显示路线谷歌地图上的航点
Web表单
<form class="uk-form" name="myForm" id="myForm">
<input id="pickup" class="controls" name="pickup" type="text"/>
<input id="dropoff" class="controls" name="dropoff" type="text"/>
<input id="visitarea" class="controls" name="visitarea" type="text"/>
<input id="calculatefare" class="calculatefare" type="button" value="Calculate Fare" />
</form>
JavaScript函数
function initAutocomplete() {
var origin_place_id = null;
var destination_place_id = null;
var visitarea_place_id = null;
var travel_mode = google.maps.TravelMode.DRIVING;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeControl: false,
center: {lat: 30.3753, lng: 69.3451},
zoom: 7,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);
var pickup = document.getElementById('pickup');
var dropoff = document.getElementById('dropoff');
var visitarea = document.getElementById('visitarea');
var options = {
componentRestrictions: {country: 'pk'}//Pakistan only
};
var origin_autocomplete = new google.maps.places.Autocomplete(pickup,options);
origin_autocomplete.bindTo('bounds', map);
var destination_autocomplete = new google.maps.places.Autocomplete(dropoff,options);
destination_autocomplete.bindTo('bounds', map);
var destination_autocomplete = new google.maps.places.Autocomplete(visitarea,options);
destination_autocomplete.bindTo('bounds', map);
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function expandViewportToFitPlace(map, place) {
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
}
origin_autocomplete.addListener('place_changed', function() {
var place = origin_autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
expandViewportToFitPlace(map, place);
// If the place has a geometry, store its place ID and route if we have
// the other place ID
origin_place_id = place.place_id;
route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode,
directionsService, directionsDisplay);
});
destination_autocomplete.addListener('place_changed', function() {
var place = destination_autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
expandViewportToFitPlace(map, place);
// If the place has a geometry, store its place ID and route if we have
// the other place ID
destination_place_id = place.place_id;
route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode,
directionsService, directionsDisplay);
});
visitarea_autocomplete.addListener('place_changed', function() {
var place = visitarea_autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
expandViewportToFitPlace(map, place);
// If the place has a geometry, store its place ID and route if we have
// the other place ID
visitarea_place_id = place.place_id;
route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode,
directionsService, directionsDisplay);
});
function route(origin_place_id, destination_place_id, visitarea_place_id, travel_mode,
directionsService, directionsDisplay) {
if (!origin_place_id || !destination_place_id) {
return;
}
directionsService.route({
origin: {'placeId': origin_place_id},
destination: {'placeId': destination_place_id},
visitarea: {'placeId': visitarea_place_id},
optimizeWaypoints: true,
travelMode: travel_mode
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var d = response.routes[0].legs[0].distance.text;
document.getElementById('km').value = d;
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
}
此代码不能正常工作由于网页表单中的访问区域输入字段以及javascript函数中的所有其他相关内容,但是如果删除了所有与访问区域相关的内容,则拾取和下载地址ss工作正常,并给我所需的输出。
在这方面的任何帮助?
很不错的!如果您没有输入航点,则会发出错误,但除此之外,完美地起作用。 –