Google 地图设置 waypoints 接送时间
Google maps set waypoints pick up time
帮我解决这个案子-
演示：http://jsfiddle.net/aLosek26/（html中的解释）
如何根据最后一个地址的预设到达时间计算每个站点的接送时间？
这是代码
<style>
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
.ziel {
padding: 10px;
background-color: #0086A9;
color: #fff;
font-size: 15px;
margin-bottom: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;padding:20px;"></div>
<div style="padding-left:10px;">I want "pick up time" to look like this:
<br> A to B -> pick up time: 13:12
<br> B to C -> pick up time: 13:16
<br> C to D -> pick up time: 13:48
<br> D to E -> pick up time: 14:20
<br> E to F -> pick up time: 14:32
<br> F to G -> pick up time: 14:45
<br>
<br> </div>
<div><strong>Arrival to the last address is 15:00 </strong> </div>
<br>
<br>
<br>
<div id="total"></div>
</div>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
google.maps.event.addDomListener(window, 'load', initialize);
function calcRoute() {
var checkboxArray = ["Klosterneuburgerstrasse 3,1200 Wien", "Simon-Denk Gasse 2,1090 wien", "Favoritenstrasse 3, 1100 Wien", "Hütteldorferstrasse 4, 1140 Wien", "Summeringerhauptstrasse 3, 1110 Wien", "Kobesgase, 1220 Wien", "Ziegelhofstrasse 3, 1220 Wien"];
var start = checkboxArray[0];
var end = checkboxArray[checkboxArray.length - 1];
var waypts = [];
for(var i = 1; i < checkboxArray.length - 1; i++) {
var adresanesto = checkboxArray[i];
if(adresanesto !== "") {
waypts.push({
location: adresanesto,
stopover: true
});
}
}
var request = {
// from: Blackpool to: Preston to: Blackburn
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if(status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
var ankunft = "06:00";
for(var i = 0; i < route.legs.length; i++) {
var hms = ankunft; // your input string
var zeit = route.legs[i].duration.value;
var zeitx = (zeit / 60).toFixed(0);
var a = hms.split(':');
var sekunde = (+a[0]) * 60 * 60 + (+a[1]) * 60;
var min5x = zeitx * 60;
var sec_num = (+sekunde - +min5x);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = Math.floor(sec_num - (hours * 3600) - (minutes * 60));
if(hours < 10) {
hours = "0" + hours;
}
if(minutes < 10) {
minutes = "0" + minutes;
}
if(seconds < 10) {
seconds = "0" + seconds;
}
var vreme = hours + ':' + minutes;
var routeSegment = i + 1;
var ruta = "ruta" + routeSegment;
var timespan = "timespan" + routeSegment;
var vremespan = "vremespan" + routeSegment;
if(routeSegment == 1) {
var ziel = 'A to B';
}
if(routeSegment == 2) {
var ziel = 'B to C';
}
if(routeSegment == 3) {
var ziel = 'C to D';
}
if(routeSegment == 4) {
var ziel = 'D to E';
}
if(routeSegment == 5) {
var ziel = 'E to F';
}
if(routeSegment == 6) {
var ziel = 'F to G';
}
if(routeSegment == 7) {
var ziel = 'G to H';
}
if(routeSegment == 8) {
var ziel = 'H to I';
}
summaryPanel.innerHTML += "<div id='" + ruta + "'><b><span class='ziel'> " + ziel + "</span></b><br /><br />";
// summaryPanel.innerHTML += route.legs[i].start_address + " to ";
// summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
summaryPanel.innerHTML += "<b>Distance: </b>" + route.legs[i].distance.text + "<br />";
summaryPanel.innerHTML += "<b>Duration: </b><span id='" + timespan + "'>" + zeitx + "</span> Min.<br />";
summaryPanel.innerHTML += "<b>Pick up time: </b><span id='" + vremespan + "'><span style='color:#ff0000'>" + vreme + "</span> <---- ???<br /><br /></div>";
}
computeTotalDistance(response);
} else {
alert("directions response " + status);
}
});
}
function computeTotalDistance(result) {
var totalDist = 0;
var totalTime = 0;
var myroute = result.routes[0];
for(i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(0) + " minutes";
}
</script>
编辑
说明
我们有一个开始地址和结束地址以及四个 waypoints 和变量 "arrival" - 到达时间
到达15:00
A B C D E F G = 不同的地址 - 街道号码邮政编码城市...
A to B Distance: 1,2 km Duration: 4 Min.
B to C Distance: 13,8 km Duration: 32 Min.
C to D Distance: 20,3 km Duration: 32 Min.
D to E Distance: 6,9 km Duration: 12 Min.
E to F Distance: 9,1 km Duration: 13 Min.
F to G Distance: 6,9 km Duration: 15 Min.
A为起始地址
B C D E 和 F 是 waypoints
G为结束地址
示例：
终点地址的到达时间已设置15:00，航点F 和终点地址G 之间的持续时间为15 分钟，然后从航点F 的接载时间为14:45 | F 到 G 取件时间 14:45
如何计算所有 waypoints ?
A 到 B 取件时间？
B 到 C 取件时间？
...
我想变成这样
A 到 B - 距离：1.2 公里持续时间：4 分钟领取时间：13:12
B 到 C - 距离：13.8 公里持续时间：32 分钟领取时间：13:16
C 到 D - 距离：20.3 公里持续时间：32 分钟接送时间：13:48
D 到 E - 距离：6.9 公里持续时间：12 分钟领取时间：14:20
E 到 F - 距离：9.1 公里持续时间：13 分钟领取时间：14:32
F 到 G - 距离：6.9 公里持续时间：15 分钟接送时间：14:45
我需要这个来打车
希望你明白我想要什么...
抱歉我的英语不好...
如果您不知道下一航段的持续时间，您将如何计算 waypoints 的接送时间？
您必须从最后一段迭代到第一段。
而不是使用复杂的时间计算，您应该使用 Date-object，这就是它的好处。
function initialize() {
var goo = google.maps,
map = new goo.Map(document.getElementById("map_canvas"), {
center: new goo.LatLng(41.850033, -87.6500523),
zoom: 6,
noClear: true,
disableDefaultUI: true
}),
service = new goo.DirectionsService(),
renderer = new goo.DirectionsRenderer({
map: map
});
map.controls[goo.ControlPosition.TOP_RIGHT]
.push(document.getElementById("directions_panel"));
goo.event
.addDomListener(document.getElementById("directions_panel"),
'click',
function(e) {
var legs = this.querySelectorAll('div[id^="ruta"][data-latlng]');
for (var i = 0; i < legs.length; ++i) {
if (
legs[i] == e.target ||
legs[i].contains(e.target)
) {
var latlng = legs[i]
.getAttribute('data-latlng')
.split(',')
map.panTo(new goo.LatLng(latlng[0], latlng[1]));
return;
}
}
});
calcRoute(service,
renderer, ["Klosterneuburgerstrasse 3,1200 Wien",
"Simon-Denk Gasse 2,1090 wien",
"Favoritenstrasse 3, 1100 Wien",
"Hütteldorferstrasse 4, 1140 Wien",
"Summeringerhauptstrasse 3, 1110 Wien",
"Kobesgase, 1220 Wien",
"Ziegelhofstrasse 3, 1220 Wien"
]);
}
function calcRoute(service, renderer, route) {
var goo = google.maps,
request = {
origin: route.shift(),
destination: route.pop(),
waypoints: (function(r) {
var a = [];
for (var i = 0; i < r.length; ++i) {
a.push({
location: r[i],
stopover: true
})
}
return a;
}(route)),
optimizeWaypoints: true,
travelMode: goo.DirectionsTravelMode.DRIVING
};
service.route(request, function(response, status) {
if (status == goo.DirectionsStatus.OK) {
renderer.setDirections(response);
var route = response.routes[0];
//parse string into a Date-object
var arrival = (function(hm) {
var d = new Date(),
a = hm.split(':');
d.setHours(parseInt(a[0]));
d.setMinutes(parseInt(a[1]));
d.setSeconds(0);
return d;
}("06:00")),
total = {
duration: 0,
distance: 0
},
//returns the formatted pickup-time
pickup = function(duration) {
arrival.setTime(arrival.getTime() - (duration * 1000));
return ([("0" + arrival.getHours()).slice(-2),
("0" + arrival.getMinutes()).slice(-2)]
.join(':'));
},
html = [],
item;
for (var i = route.legs.length - 1; i >= 0; --i) {
total.distance += route.legs[i].distance.value;
total.duration += route.legs[i].duration.value;
item = "<div data-latlng='" +
route.legs[i].start_location.toUrlValue() + "' id='ruta" +
(i + 1) + "'><b><span class='ziel'> " +
String.fromCharCode(65 + i) +
' to ' +
String.fromCharCode(65 + 1 + i) +
"</span></b><br /><br />";
item += "<b>Distance: </b>" + route.legs[i].distance.text + "<br />";
item += "<b>Duration: </b><span id='timespan" + (i + 1) + "'>" +
(route.legs[i].duration.value / 60).toFixed(0) +
"</span> Min.<br />";
item += "<b>Pick up time: </b><span id='vremespan" + (i + 1) + "'>" +
"<span style='color:#ff0000'>" +
pickup(route.legs[i].duration.value) + "</span><br /><br /></div>";
html.unshift(item);
}
html.push(
"<hr/>total distance is: " + (total.distance / 1000).toFixed(1) +
" km<br>total time is: " +
(total.duration / 60).toFixed(0) + " minutes")+'<br/><hr/>';
document.getElementById("directions_panel").innerHTML = html.join('');
} else {
document.getElementById("directions_panel") = "directions response:" + status;
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.ziel {
padding: 5px;
background-color: #0086A9;
color: #fff;
font-size: 1.1em;
margin-bottom: 10px;
cursor: pointer;
}
#directions_panel {
height:60%;
overflow: auto;
background-color: #FFEE77;
font-size: 12px;
padding: 5px 5px 50px 5px;
}
<script src="http://maps.google.com/maps/api/js?v=3"></script>
<div id="map_canvas">
<div id="directions_panel"></div>
</div>
我想我做的事情和 Dr.Molle 差不多（我们同时开始编写这段代码）。我也是从头到尾迭代。
但我还是想 post 我的代码。
我把计算保持在几秒钟内。只在最后一刻转换；并且不要使用像 (hours * 3600) 这样的自定义计算...时间很棘手；有很多你没有想到的例外情况。
<style>
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
.ziel {
padding: 10px;
background-color: #0086A9;
color: #fff;
font-size: 15px;
margin-bottom: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;padding:20px;"></div>
<div style="padding-left:10px;">I want "pick up time" to look like this:
<br> A to B -> pick up time: 13:12
<br> B to C -> pick up time: 13:16
<br> C to D -> pick up time: 13:48
<br> D to E -> pick up time: 14:20
<br> E to F -> pick up time: 14:32
<br> F to G -> pick up time: 14:45
<br>
<br> </div>
<div><strong>Arrival to the last address is 15:00 </strong> </div>
<br>
<br>
<br>
<div id="total"></div>
</div>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
google.maps.event.addDomListener(window, 'load', initialize);
function calcRoute() {
var checkboxArray = ["Klosterneuburgerstrasse 3,1200 Wien", "Simon-Denk Gasse 2,1090 wien", "Favoritenstrasse 3, 1100 Wien", "Hütteldorferstrasse 4, 1140 Wien", "Summeringerhauptstrasse 3, 1110 Wien", "Kobesgase, 1220 Wien", "Ziegelhofstrasse 3, 1220 Wien"];
var start = checkboxArray[0];
var end = checkboxArray[checkboxArray.length - 1];
var waypts = [];
for(var i = 1; i < checkboxArray.length - 1; i++) {
var adresanesto = checkboxArray[i];
if(adresanesto !== "") {
waypts.push({
location: adresanesto,
stopover: true
});
}
}
var request = {
// from: Blackpool to: Preston to: Blackburn
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if(status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
var displayText = '';
var arrival = new Date();
var secondsToArrival = 0;
// set arrival time
arrival.setHours(15);
arrival.setMinutes(0);
arrival.setSeconds(0);
// let's calculate back. From finish to start
for(var i = route.legs.length - 1; i >=0; i--) {
//summaryPanel.innerHTML += +'s<br>';
secondsToArrival += route.legs[i].duration.value;
// new date variable.
var startAtWaypoint = new Date();
startAtWaypoint.setHours(arrival.getHours());
startAtWaypoint.setMinutes(arrival.getMinutes());
startAtWaypoint.setSeconds(arrival.getSeconds());
// calculate difference. We subtract the seconds.
startAtWaypoint.setSeconds(arrival.getSeconds() - secondsToArrival);
switch(i) {
case 0: var ziel = 'A to B'; break;
case 1: var ziel = 'B to C'; break;
case 2: var ziel = 'C to D'; break;
case 3: var ziel = 'D to E'; break;
case 4: var ziel = 'E to F'; break;
case 5: var ziel = 'F to G'; break;
case 6: var ziel = 'G to H'; break;
case 7: var ziel = 'H to I'; break;
default: var ziel = '';
}
displayText = 'segment: ' + ziel
+ '<br>dist: ' + route.legs[i].distance.text
+ '<br> time segment: ' + route.legs[i].duration.value
+ 's <br> seconds to arrival: ' + secondsToArrival
+ 's <br> time at waypoint: ' + startAtWaypoint.getHours() +':'+ startAtWaypoint.getMinutes()
+ '<hr>' + displayText; // notice: instead of displayText+= , I put displayText at the end, because the loop is backwards
}
summaryPanel.innerHTML = displayText;
computeTotalDistance(response);
}
else {
alert("directions response " + status);
}
});
}
function computeTotalDistance(result) {
var totalDist = 0;
var totalTime = 0;
var myroute = result.routes[0];
for(i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(0) + " minutes";
}
</script>
帮我解决这个案子- 演示：http://jsfiddle.net/aLosek26/（html中的解释）
如何根据最后一个地址的预设到达时间计算每个站点的接送时间？
这是代码
<style>
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
.ziel {
padding: 10px;
background-color: #0086A9;
color: #fff;
font-size: 15px;
margin-bottom: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;padding:20px;"></div>
<div style="padding-left:10px;">I want "pick up time" to look like this:
<br> A to B -> pick up time: 13:12
<br> B to C -> pick up time: 13:16
<br> C to D -> pick up time: 13:48
<br> D to E -> pick up time: 14:20
<br> E to F -> pick up time: 14:32
<br> F to G -> pick up time: 14:45
<br>
<br> </div>
<div><strong>Arrival to the last address is 15:00 </strong> </div>
<br>
<br>
<br>
<div id="total"></div>
</div>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
google.maps.event.addDomListener(window, 'load', initialize);
function calcRoute() {
var checkboxArray = ["Klosterneuburgerstrasse 3,1200 Wien", "Simon-Denk Gasse 2,1090 wien", "Favoritenstrasse 3, 1100 Wien", "Hütteldorferstrasse 4, 1140 Wien", "Summeringerhauptstrasse 3, 1110 Wien", "Kobesgase, 1220 Wien", "Ziegelhofstrasse 3, 1220 Wien"];
var start = checkboxArray[0];
var end = checkboxArray[checkboxArray.length - 1];
var waypts = [];
for(var i = 1; i < checkboxArray.length - 1; i++) {
var adresanesto = checkboxArray[i];
if(adresanesto !== "") {
waypts.push({
location: adresanesto,
stopover: true
});
}
}
var request = {
// from: Blackpool to: Preston to: Blackburn
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if(status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
var ankunft = "06:00";
for(var i = 0; i < route.legs.length; i++) {
var hms = ankunft; // your input string
var zeit = route.legs[i].duration.value;
var zeitx = (zeit / 60).toFixed(0);
var a = hms.split(':');
var sekunde = (+a[0]) * 60 * 60 + (+a[1]) * 60;
var min5x = zeitx * 60;
var sec_num = (+sekunde - +min5x);
var hours = Math.floor(sec_num / 3600);
var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
var seconds = Math.floor(sec_num - (hours * 3600) - (minutes * 60));
if(hours < 10) {
hours = "0" + hours;
}
if(minutes < 10) {
minutes = "0" + minutes;
}
if(seconds < 10) {
seconds = "0" + seconds;
}
var vreme = hours + ':' + minutes;
var routeSegment = i + 1;
var ruta = "ruta" + routeSegment;
var timespan = "timespan" + routeSegment;
var vremespan = "vremespan" + routeSegment;
if(routeSegment == 1) {
var ziel = 'A to B';
}
if(routeSegment == 2) {
var ziel = 'B to C';
}
if(routeSegment == 3) {
var ziel = 'C to D';
}
if(routeSegment == 4) {
var ziel = 'D to E';
}
if(routeSegment == 5) {
var ziel = 'E to F';
}
if(routeSegment == 6) {
var ziel = 'F to G';
}
if(routeSegment == 7) {
var ziel = 'G to H';
}
if(routeSegment == 8) {
var ziel = 'H to I';
}
summaryPanel.innerHTML += "<div id='" + ruta + "'><b><span class='ziel'> " + ziel + "</span></b><br /><br />";
// summaryPanel.innerHTML += route.legs[i].start_address + " to ";
// summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
summaryPanel.innerHTML += "<b>Distance: </b>" + route.legs[i].distance.text + "<br />";
summaryPanel.innerHTML += "<b>Duration: </b><span id='" + timespan + "'>" + zeitx + "</span> Min.<br />";
summaryPanel.innerHTML += "<b>Pick up time: </b><span id='" + vremespan + "'><span style='color:#ff0000'>" + vreme + "</span> <---- ???<br /><br /></div>";
}
computeTotalDistance(response);
} else {
alert("directions response " + status);
}
});
}
function computeTotalDistance(result) {
var totalDist = 0;
var totalTime = 0;
var myroute = result.routes[0];
for(i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(0) + " minutes";
}
</script>
编辑 说明
我们有一个开始地址和结束地址以及四个 waypoints 和变量 "arrival" - 到达时间
到达15:00
A B C D E F G = 不同的地址 - 街道号码邮政编码城市...
A to B Distance: 1,2 km Duration: 4 Min. B to C Distance: 13,8 km Duration: 32 Min. C to D Distance: 20,3 km Duration: 32 Min. D to E Distance: 6,9 km Duration: 12 Min. E to F Distance: 9,1 km Duration: 13 Min. F to G Distance: 6,9 km Duration: 15 Min.
A为起始地址 B C D E 和 F 是 waypoints G为结束地址
示例：
终点地址的到达时间已设置15:00，航点F 和终点地址G 之间的持续时间为15 分钟，然后从航点F 的接载时间为14:45 | F 到 G 取件时间 14:45
如何计算所有 waypoints ?
A 到 B 取件时间？
B 到 C 取件时间？
...
我想变成这样
A 到 B - 距离：1.2 公里持续时间：4 分钟领取时间：13:12
B 到 C - 距离：13.8 公里持续时间：32 分钟领取时间：13:16
C 到 D - 距离：20.3 公里持续时间：32 分钟接送时间：13:48
D 到 E - 距离：6.9 公里持续时间：12 分钟领取时间：14:20
E 到 F - 距离：9.1 公里持续时间：13 分钟领取时间：14:32
F 到 G - 距离：6.9 公里持续时间：15 分钟接送时间：14:45
我需要这个来打车
希望你明白我想要什么...
抱歉我的英语不好...
如果您不知道下一航段的持续时间，您将如何计算 waypoints 的接送时间？
您必须从最后一段迭代到第一段。
而不是使用复杂的时间计算，您应该使用 Date-object，这就是它的好处。
function initialize() {
var goo = google.maps,
map = new goo.Map(document.getElementById("map_canvas"), {
center: new goo.LatLng(41.850033, -87.6500523),
zoom: 6,
noClear: true,
disableDefaultUI: true
}),
service = new goo.DirectionsService(),
renderer = new goo.DirectionsRenderer({
map: map
});
map.controls[goo.ControlPosition.TOP_RIGHT]
.push(document.getElementById("directions_panel"));
goo.event
.addDomListener(document.getElementById("directions_panel"),
'click',
function(e) {
var legs = this.querySelectorAll('div[id^="ruta"][data-latlng]');
for (var i = 0; i < legs.length; ++i) {
if (
legs[i] == e.target ||
legs[i].contains(e.target)
) {
var latlng = legs[i]
.getAttribute('data-latlng')
.split(',')
map.panTo(new goo.LatLng(latlng[0], latlng[1]));
return;
}
}
});
calcRoute(service,
renderer, ["Klosterneuburgerstrasse 3,1200 Wien",
"Simon-Denk Gasse 2,1090 wien",
"Favoritenstrasse 3, 1100 Wien",
"Hütteldorferstrasse 4, 1140 Wien",
"Summeringerhauptstrasse 3, 1110 Wien",
"Kobesgase, 1220 Wien",
"Ziegelhofstrasse 3, 1220 Wien"
]);
}
function calcRoute(service, renderer, route) {
var goo = google.maps,
request = {
origin: route.shift(),
destination: route.pop(),
waypoints: (function(r) {
var a = [];
for (var i = 0; i < r.length; ++i) {
a.push({
location: r[i],
stopover: true
})
}
return a;
}(route)),
optimizeWaypoints: true,
travelMode: goo.DirectionsTravelMode.DRIVING
};
service.route(request, function(response, status) {
if (status == goo.DirectionsStatus.OK) {
renderer.setDirections(response);
var route = response.routes[0];
//parse string into a Date-object
var arrival = (function(hm) {
var d = new Date(),
a = hm.split(':');
d.setHours(parseInt(a[0]));
d.setMinutes(parseInt(a[1]));
d.setSeconds(0);
return d;
}("06:00")),
total = {
duration: 0,
distance: 0
},
//returns the formatted pickup-time
pickup = function(duration) {
arrival.setTime(arrival.getTime() - (duration * 1000));
return ([("0" + arrival.getHours()).slice(-2),
("0" + arrival.getMinutes()).slice(-2)]
.join(':'));
},
html = [],
item;
for (var i = route.legs.length - 1; i >= 0; --i) {
total.distance += route.legs[i].distance.value;
total.duration += route.legs[i].duration.value;
item = "<div data-latlng='" +
route.legs[i].start_location.toUrlValue() + "' id='ruta" +
(i + 1) + "'><b><span class='ziel'> " +
String.fromCharCode(65 + i) +
' to ' +
String.fromCharCode(65 + 1 + i) +
"</span></b><br /><br />";
item += "<b>Distance: </b>" + route.legs[i].distance.text + "<br />";
item += "<b>Duration: </b><span id='timespan" + (i + 1) + "'>" +
(route.legs[i].duration.value / 60).toFixed(0) +
"</span> Min.<br />";
item += "<b>Pick up time: </b><span id='vremespan" + (i + 1) + "'>" +
"<span style='color:#ff0000'>" +
pickup(route.legs[i].duration.value) + "</span><br /><br /></div>";
html.unshift(item);
}
html.push(
"<hr/>total distance is: " + (total.distance / 1000).toFixed(1) +
" km<br>total time is: " +
(total.duration / 60).toFixed(0) + " minutes")+'<br/><hr/>';
document.getElementById("directions_panel").innerHTML = html.join('');
} else {
document.getElementById("directions_panel") = "directions response:" + status;
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.ziel {
padding: 5px;
background-color: #0086A9;
color: #fff;
font-size: 1.1em;
margin-bottom: 10px;
cursor: pointer;
}
#directions_panel {
height:60%;
overflow: auto;
background-color: #FFEE77;
font-size: 12px;
padding: 5px 5px 50px 5px;
}
<script src="http://maps.google.com/maps/api/js?v=3"></script>
<div id="map_canvas">
<div id="directions_panel"></div>
</div>
我想我做的事情和 Dr.Molle 差不多（我们同时开始编写这段代码）。我也是从头到尾迭代。
但我还是想 post 我的代码。
我把计算保持在几秒钟内。只在最后一刻转换；并且不要使用像 (hours * 3600) 这样的自定义计算...时间很棘手；有很多你没有想到的例外情况。
<style>
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
.ziel {
padding: 10px;
background-color: #0086A9;
color: #fff;
font-size: 15px;
margin-bottom: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;padding:20px;"></div>
<div style="padding-left:10px;">I want "pick up time" to look like this:
<br> A to B -> pick up time: 13:12
<br> B to C -> pick up time: 13:16
<br> C to D -> pick up time: 13:48
<br> D to E -> pick up time: 14:20
<br> E to F -> pick up time: 14:32
<br> F to G -> pick up time: 14:45
<br>
<br> </div>
<div><strong>Arrival to the last address is 15:00 </strong> </div>
<br>
<br>
<br>
<div id="total"></div>
</div>
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
google.maps.event.addDomListener(window, 'load', initialize);
function calcRoute() {
var checkboxArray = ["Klosterneuburgerstrasse 3,1200 Wien", "Simon-Denk Gasse 2,1090 wien", "Favoritenstrasse 3, 1100 Wien", "Hütteldorferstrasse 4, 1140 Wien", "Summeringerhauptstrasse 3, 1110 Wien", "Kobesgase, 1220 Wien", "Ziegelhofstrasse 3, 1220 Wien"];
var start = checkboxArray[0];
var end = checkboxArray[checkboxArray.length - 1];
var waypts = [];
for(var i = 1; i < checkboxArray.length - 1; i++) {
var adresanesto = checkboxArray[i];
if(adresanesto !== "") {
waypts.push({
location: adresanesto,
stopover: true
});
}
}
var request = {
// from: Blackpool to: Preston to: Blackburn
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if(status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
var displayText = '';
var arrival = new Date();
var secondsToArrival = 0;
// set arrival time
arrival.setHours(15);
arrival.setMinutes(0);
arrival.setSeconds(0);
// let's calculate back. From finish to start
for(var i = route.legs.length - 1; i >=0; i--) {
//summaryPanel.innerHTML += +'s<br>';
secondsToArrival += route.legs[i].duration.value;
// new date variable.
var startAtWaypoint = new Date();
startAtWaypoint.setHours(arrival.getHours());
startAtWaypoint.setMinutes(arrival.getMinutes());
startAtWaypoint.setSeconds(arrival.getSeconds());
// calculate difference. We subtract the seconds.
startAtWaypoint.setSeconds(arrival.getSeconds() - secondsToArrival);
switch(i) {
case 0: var ziel = 'A to B'; break;
case 1: var ziel = 'B to C'; break;
case 2: var ziel = 'C to D'; break;
case 3: var ziel = 'D to E'; break;
case 4: var ziel = 'E to F'; break;
case 5: var ziel = 'F to G'; break;
case 6: var ziel = 'G to H'; break;
case 7: var ziel = 'H to I'; break;
default: var ziel = '';
}
displayText = 'segment: ' + ziel
+ '<br>dist: ' + route.legs[i].distance.text
+ '<br> time segment: ' + route.legs[i].duration.value
+ 's <br> seconds to arrival: ' + secondsToArrival
+ 's <br> time at waypoint: ' + startAtWaypoint.getHours() +':'+ startAtWaypoint.getMinutes()
+ '<hr>' + displayText; // notice: instead of displayText+= , I put displayText at the end, because the loop is backwards
}
summaryPanel.innerHTML = displayText;
computeTotalDistance(response);
}
else {
alert("directions response " + status);
}
});
}
function computeTotalDistance(result) {
var totalDist = 0;
var totalTime = 0;
var myroute = result.routes[0];
for(i = 0; i < myroute.legs.length; i++) {
totalDist += myroute.legs[i].distance.value;
totalTime += myroute.legs[i].duration.value;
}
totalDist = totalDist / 1000.
document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(0) + " minutes";
}
</script>