我正在开发网络应用程序,我需要在其中添加取货地址、下车地址和一系列访问区域,用户将通过这些访问区域在取货地址和下车地址之间移动。我所做的是路由地图并计算接送地址之间的距离,但我无法将访问区域与接送地址相匹配。这是我的代码,如果有人可以告诉我如何执行此操作:
网络表格
<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);
}
});
}
}
由于 Web 表单中的访问区域输入字段和 javascript 函数中的所有其他相关内容,此代码无法正常工作,但如果我删除所有与访问区域相关的内容,则取货地址工作正常,并给我所需的输出.
这有什么帮助吗?