使用一个航点作为GMaps实现阿比目的地 [英] Use one waypoint as destination in Gmaps Api
本文介绍了使用一个航点作为GMaps实现阿比目的地的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用GMaps实现API来让谁拥有访问市场的列表（我的航点）注意他们的股票的人的路线。我使用的是用户的家位置的路由的来源和市场作为我的航点的位置。问题是，我不知道哪个航点航线的目的地，因为我设置的属性优化=真的时候调用的方向服务，但API需要一个目的地跟踪路线。
我需要的是一个方法来告诉API来使用我的优化的路由的最后一个航点作为目的地。
解决方案
您可以让多个请求路线服务，一用每个可能的航点作为最终目的地，挑最短造成的距离。
概念小提琴证明
code片断：
\r
\r\r
\r VAR地图;\r
变种directionsServices = [];\r
变种directionsDisplays = [];\r
//常量开始地址\r
VAR开始=帕拉姆斯，新泽西州;\r
//可能的候选目的地/航点的名单（必须是＆LT; 9）\r
VAR位置= [67ë里奇伍德大道，帕拉姆斯，新泽西州07652，\r
450罗谢尔大道，罗谢尔公园，新泽西州07662，\r
720河路，新的Milford，NJ 07646，\r
280主街，新的Milford，NJ 07646，\r
469帕塞伊克市，新泽西州哈肯萨克07601，\r
91百老汇，埃尔姆伍德帕克，新泽西州07407，\r
206市场街，萨德尔布鲁克，新泽西州07662\r
];\r
变种路由= [];\r
\r
函数初始化（）{\r
VAR地图=新google.maps.Map（\r
的document.getElementById（map_canvas的），{\r
中心：新google.maps.LatLng（37.4419，-122.1419）\r
变焦：13，\r
mapTypeId设为：google.maps.MapTypeId.ROADMAP\r
}）;\r
的document.getElementById（信息）的innerHTML + =＆LT; U＆GT;＆LT; B＆GT;中间结果：其中; / B＆GT;＆LT; / U＆GT;＆LT; BR＆gt;中;\r
getDirections（启动，位置，地图）;\r
}\r
google.maps.event.addDomListener（窗口，在负荷，初始化）;\r
\r
功能getDirections（启动，路标，地图）{\r
VAR请求= [];\r
VAR请求= {\r
产地：开始，\r
optimizeWaypoints：真实，\r
travelMode：google.maps.TravelMode.DRIVING\r
};\r
对于（VAR J = 0; J＆LT; waypoints.length; J ++）{\r
变种waypts = [];\r
对于（VAR I = 0; I＆LT; waypoints.length;我++）{\r
如果（我！= j）条{\r
waypts.push（{\r
位置：航点[I]\r
中途停留：真\r
}）;\r
}\r
}\r
请求[J] = {};\r
请求[J] .destination =航点[J]。\r
请求[J] .waypoints = waypts;\r
请求[J] .origin =启动;\r
请求[J] .optimizeWaypoints = TRUE;\r
请求[J] .travelMode = google.maps.TravelMode.DRIVING;\r
\r
的setTimeout（函数（请求，J）{\r
sendDirectionsRequest（请求，J，地图）;\r
}（请求[J]，J），3000 * j）条;\r
}\r
}\r
\r
功能sendDirectionsRequest（请求，索引地图）{\r
VAR为DirectionsService =新google.maps.DirectionsService（）;\r
directionsServices.push（为DirectionsService）;\r
directionsService.route（要求，功能（响应状态）{\r
如果（状态=== google.maps.DirectionsStatus.OK）{\r
变种路线= response.routes [0];\r
routes.push（路线）;\r
变种距离= 0;\r
变种持续时间= 0;\r
对于（VAR I = 0; I＆LT; route.legs.length;我++）{\r
距离+ = route.legs [I] .distance.value;\r
持续时间+ = route.legs [I] .duration.value;\r
}\r
route.distance =距离;\r
route.duration =持续时间;\r
route.index =指数;\r
的document.getElementById（信息）的innerHTML + =（routes.length - 1）+DIST：+（route.distance / 1000）.toFixed（2）+公里DUR：+（route.duration / 60 ）.toFixed（2）+分DEST：+指数+LOC：+位置[指数] +waypt命令：+ route.waypoint_order +＆LT; BR＆gt;中;\r
如果（routes.length == locations.length）{\r
routes.sort（sortFcn）;\r
VAR directionsDisplay =新google.maps.DirectionsRenderer（{\r
地图：地图，\r
的PolylineOptions：{\r
strokeOpacity，用于：0.9，\r
strokeWeight，用于：4，\r
则strokeColor：黑，\r
zIndex的：10\r
}\r
}）;\r
directionsDisplay.setDirections（响应）;\r
directionsDisplay.setMap（地图）;\r
的document.getElementById（信息）的innerHTML + =＆LT; U＆GT;＆LT; B＆GT;最短的结果是：其中; / B＆GT;＆LT; / U＆GT;＆LT; BR＆gt;中+路线[0]的.index +DIST：+（路线[0] .distance / 1000）.toFixed（2）+千米DUR：+（路线[0] .duration / 60）.toFixed（2） +分DEST：+路线[0] +的.indexLOC：+位置[指数] +waypt命令：+路线[0] .waypoint_order +＆LT; BR＆gt;中;\r
}\r
}其他{\r
window.alert（'路线请求失败，原因是'+状态）;\r
}\r
}）;\r
}\r
\r
功能sortFcn（A，B）{\r
如果（a.distance＆GT; b.distance）返回1;\r
否则，如果（a.distance＆LT; b.distance）返回-1;\r
否则返回0;\r
} \r
HTML，\r
身体，\r
#map_canvas {\r
高度：100％;\r
宽度：100％;\r
保证金：0像素;\r
填充：0像素\r
} \r
＆LT;脚本SRC =https://maps.googleapis.com/maps / API / JS＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; DIV ID =信息＆GT;＆LT; / DIV＆GT;\r
＆LT; DIV ID =map_canvas的＆GT;＆LT; / DIV＆GT; \r
I'm using gmaps Api to make a route for a person who have to visit a list of markets (my waypoints) to take note of their stocks. I'm using the user's house location for the origin of the route and the location of the markets as my waypoints. The problem is that I don't know which waypoint is the route's destination because I set the property optimization = true when call the the direction service, but the api needs a destination to trace the route.
What I need is a way to tell the api to use the last waypoint of my optimized route as a destination.
解决方案
You could make multiple requests to the directions service, one with each possible waypoint as the final destination, pick the shortest resulting distance.
code snippet:
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"></script>
<div id="info"></div>
<div id="map_canvas"></div>
这篇关于使用一个航点作为GMaps实现阿比目的地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
