我正在使用 gmaps Api 为必须访问市场列表(我的航点)以记录他们的股票的人制作路线。我将用户的房屋位置用作路线的起点,并将市场的位置用作我的航点。问题是我不知道哪个航点是路线的目的地,因为我optimization = true
在调用方向服务时设置了属性,但是 api 需要一个目的地来跟踪路线。
我需要的是一种方法来告诉 api 使用我优化路线的最后一个航路点作为目的地。
我正在使用 gmaps Api 为必须访问市场列表(我的航点)以记录他们的股票的人制作路线。我将用户的房屋位置用作路线的起点,并将市场的位置用作我的航点。问题是我不知道哪个航点是路线的目的地,因为我optimization = true
在调用方向服务时设置了属性,但是 api 需要一个目的地来跟踪路线。
我需要的是一种方法来告诉 api 使用我优化路线的最后一个航路点作为目的地。
您可以向路线服务发出多个请求,将每个可能的航路点作为最终目的地,选择最短的结果距离。
代码片段:
var map;
var directionsServices = [];
var directionsDisplays = [];
// constant "start" address
var start = "Paramus, NJ";
// list of possible candidate destinations/waypoints (must be < 9)
var locations = ["67 E Ridgewood Ave, Paramus, NJ 07652",
"450 Rochelle Ave, Rochelle Park, NJ 07662,",
"720 River Rd, New Milford, NJ 07646",
"280 Main St, New Milford, NJ 07646",
"469 Passaic St, Hackensack, NJ 07601",
"91 Broadway, Elmwood Park, NJ 07407",
"206 Market St, Saddle Brook, NJ 07662"
];
var routes = [];
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
document.getElementById('info').innerHTML += "<u><b>intermediate results:</b></u><br>";
getDirections(start, locations, map);
}
google.maps.event.addDomListener(window, "load", initialize);
function getDirections(start, waypoints, map) {
var requests = [];
var request = {
origin: start,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
for (var j = 0; j < waypoints.length; j++) {
var waypts = [];
for (var i = 0; i < waypoints.length; i++) {
if (i != j) {
waypts.push({
location: waypoints[i],
stopover: true
});
}
}
requests[j] = {};
requests[j].destination = waypoints[j];
requests[j].waypoints = waypts;
requests[j].origin = start;
requests[j].optimizeWaypoints = true;
requests[j].travelMode = google.maps.TravelMode.DRIVING;
setTimeout(function(request, j) {
sendDirectionsRequest(request, j, map);
}(requests[j], j), 3000 * j);
}
}
function sendDirectionsRequest(request, index, map) {
var directionsService = new google.maps.DirectionsService();
directionsServices.push(directionsService);
directionsService.route(request, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var route = response.routes[0];
routes.push(route);
var distance = 0;
var duration = 0;
for (var i = 0; i < route.legs.length; i++) {
distance += route.legs[i].distance.value;
duration += route.legs[i].duration.value;
}
route.distance = distance;
route.duration = duration;
route.index = index;
document.getElementById('info').innerHTML += (routes.length - 1) + " dist:" + (route.distance / 1000).toFixed(2) + " km dur:" + (route.duration / 60).toFixed(2) + " min dest:" + index + " loc:" + locations[index] + " waypt order:" + route.waypoint_order + "<br>";
if (routes.length == locations.length) {
routes.sort(sortFcn);
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
polylineOptions: {
strokeOpacity: 0.9,
strokeWeight: 4,
strokeColor: "black",
zIndex: 10
}
});
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
document.getElementById('info').innerHTML += "<u><b>shortest result:</b></u><br>" + routes[0].index + " dist:" + (routes[0].distance / 1000).toFixed(2) + " km dur:" + (routes[0].duration / 60).toFixed(2) + " min dest:" + routes[0].index + " loc:" + locations[index] + " waypt order:" + routes[0].waypoint_order + "<br>";
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function sortFcn(a, b) {
if (a.distance > b.distance) return 1;
else if (a.distance < b.distance) return -1;
else return 0;
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="info"></div>
<div id="map_canvas"></div>