Google Maps API V3在信息窗口中显示持续时间和距离 [英] Google Maps API V3 display duration and distance in info window
本文介绍了Google Maps API V3在信息窗口中显示持续时间和距离的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经建立了一个自定义地图，可以建立从单点到单击标记的方向，但是我无法弄清楚如何在信息窗口中显示总距离和行程时间。
函数initMap（）{
var directionsService = new google.maps.DirectionsService;
var directionsDisplay;
directionsDisplay = new google.maps.DirectionsRenderer（{
polylineOptions：{
strokeColor：red
}
}）;
var map = new google.maps.Map（document.getElementById（'map'），{
zoom：13，
center：new google.maps.LatLng（25.03086141 ，-77.39945412），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）;
directionsDisplay.setMap（map）;
var locations = [
['The Reef Atlantis'，25.084536，-77.330704，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/hotel.png ']，
['Oasis Restaurant& Bar'，25.003246，-77.4673455，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png']，
['Carmines'，25.08668，-77.32665，'https： //raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png']，
['Dune'，25.0829234，-77.3114754，'https://raw.githubusercontent.com/bjhm/ajax -dummyJson / master / food.png']，
['Montagu Gardens'，25.0721743，-77.3091388，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'] ，
['Travelers Rest'，25.0647862，-77.4721588，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png']，
['Lynden Pindling International机场'，25.0439288，-77.4655212，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/airport.png']，
['加拿大皇家银行'，25.0347498，-77.5131047 ，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png']，
['Scotia Bank'，25.01 94408，-77.3810372，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png']，
['CIBC First Caribbean'，25.0765015，-77.3386342，'https：/ /raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png']，
['Bahamas Development'，25.0699435，-77.3915533，'https://raw.githubusercontent.com/bjhm/ajax -dummyJson / master / bank.png']，
['Cozy Corner Pub'，25.074803，-77.4294573，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png' ]，
['Pirates Pub and Grill'，25.0775677，-77.3447612，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png']，
[' Beach Shack'，25.0293784，-77.5369602，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png']，
['Bamboo Shack'，25.0383471，-77.3409279，' https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png']，
['Sea Trek Helmet Diving'，25.0844329，-77 。''''''''''，'''''''''''''''''''''''''''''''''''''''' githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png']，
['Bonefish Pond'，24.9851248，-77.4042102，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/ master / tour.png']，
['Loop View'，25.0439361，-77.3587326，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png']，
['Seaworld Explorer'，25.06，-77.345，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png']，
['Fort Charlotte'，25.0769583， -77.268455，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png']，
['查尔斯王子购物中心'，25.0433013，-77.3168743，'https：// raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，
['Seagrapes Shopping Plaza'，25.0371946，-77.2808844，' https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，
['Caves Village'，25.0676409，-77.4517465'，https://raw.githubusercontent.com/ bjhm / ajax-dummyJson / master / shop.png']，
['老堡湾市中心'，25.0467254，-77.4932671，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master /shop.png']，
['Fendi'，25.06，-77.345，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，
['John Chea'，25.014643，-77.3945644，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，
['Bamboo Bamboo'，25.0344436，-77.5133997 ，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，
['Albany Water Sports'，25.001501，-77.5133815，'https：//raw.githubusercontent .com / bjhm / ajax-dummyJson / master / shop.png']，
['Sandyport Plaza'，25.0761927，-77.4280786，'https://raw.githubusercontent.com/bjhm /ajax-dummyJson/master/shop.png']，
['国家艺术博物馆'，25.075424，-77.347321，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination。 png']，
['Fort Fincastle'，25.06，-77.345，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png']，
['' Queens Staircase'，25.0759204，-77.3378813，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png']，
['Balcony House'，25.0767534，-77.3436895，' https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png']，
['奥尔巴尼高尔夫球场'，25.0125127，-77.5031764，'https://raw.githubusercontent.com /bjhm/ajax-dummyJson/master/sport.png']，
['Blue Shark Golf Course'，25.00571，-77.5261129，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master /sport.png']，
['Lynford Cay网球中心'，25.0285459，-77.534265，'https：//raw.githubus ercontent.com/bjhm/ajax-dummyJson/master/sport.png']，
['Cable Beach Golf Course'，25.0673443，-77.3941654，'https://raw.githubusercontent.com/bjhm/ajax- dummyJson / master / sport.png']
]
var marker，i;
var infowindow = new google.maps.InfoWindow（）;
（i = 0; i< locations.length; i ++）{
marker = new google.maps.Marker（{
position：new google.maps.LatLng （地点[i] [1]，地点[i] [2]），
地图：地图，
图标：地点[i] [3]
}）;
google.maps.event.addListener（marker，'click'，（function（marker，i）{
return function（）{
var distinationOrigin = new google.maps .LatLng（25.084536，-77.330704）;
var destinationMarker = locations [i] [1] +'，'+''+ locations [i] [2];
infowindow.setContent（locations [i （标记，i））;
infowindow.open（map，marker）;
calculateAndDisplayRoute（directionsService，directionsDisplay，distinationOrigin，destinationMarker）;
}
}）（marker，i） ）;
函数calculateAndDisplayRoute（directionsService，directionsDisplay，distinationOrigin，destinationMarker）{
directionsService.route（{
origin：distinationOrigin，
destination：destinationMarker，
travelMode：google.maps.TravelMode.DRIVING
}，function（response，status）{
if（status === google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（response）;
} else {
window.alert（'Directions requests failed to +'+'status';
}
}）;
}
解决方案
您需要计算总数距离方向响应中的数据的距离和时间。相关问题：从A点到B使用谷歌地图，PHP和MySQL （我的回答，不是接受的答案，是这样做的）。
计算总距离和时间：
function computeTotals（result，infowindow）{
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.
infowindow.setContent（infowindow.getContent（）+< br> total distance =+ totalDist.toFixed（2）+km（ +（totalDist * 0.621371）.toFixed（2）+miles）总时间=+（totalTime / 60）.toFixed（2）+minutes）;
}
调用它并将总距离和时间放在infowindow中：
function calculateAndDisplayRoute（directionsService，directionsDisplay，distinationOrigin，destinationMarker，infowindow）{
directionsService.route（{
origin： distinationOrigin，
destination：destinationMarker，
travelMode：google.maps.TravelMode.DRIVING
}，function（response，status）{
if（status === google.maps。 DirectionsStatus.OK）{
directionsDisplay.setDirections（response）;
computeTotals（response，infowindow）;
} else {
window.alert（'Directions requests failed due to'+状态）;
}
}）;
}
代码段：
方法服务路由（{origin：distinationOrigin，destination：destinationService，方法显示，distinationOrigin，destinationMarker，infowindow）{方法Service.route（{origin：distinationOrigin，destination： destinationMarker，travelMode：google.maps.TravelMode.DRIVING}，function（response，status）{if（status === google.maps.DirectionsStatus.OK）{directionsDisplay.setDirections（response）; computeTotals（response，infowindow）;} else {window.alert（'Directions requests failed to +'status'）;}}）;} function computeTotals（result，infowindow）{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. infowindow.setContent（infowindow.getContent（）+< br> total distance =+ totalDist.toFixed（2）+km（+（totalDist * 0.621371）.toFixed（2）+ miles）< br> total time =+（totalTime / 60）.toFixed（2）+minutes）;}函数initMap（）{var directionsService = new google.maps.DirectionsService; var directionsDisplay; directionsDisplay = new google.maps.DirectionsRenderer（{polylineOptions：{strokeColor：red}}）; var map = new google.maps.Map（document.getElementById（'map'），{zoom：13，center：new google.maps.LatLng（25.03086141，-77.39945412），mapTypeId：google.maps.MapTypeId.ROADMAP}） ; directionsDisplay.setMap（地图）; var marker，i; var infowindow = new google.maps.InfoWindow（）; （位置[i] [1]，位置[i] [2] ），map：map，icon：locations [i] [3]}）; google.maps.event.addListener（marker，'click'，（function（marker，i）{return function（）{var distinationOrigin = new google.maps.LatLng（25.084536，-77.330704）; var destinationMarker = locations [i] [1] +'，'+''+ locations [i] [2]; infowindow.setContent（locations [i] [0]）; infowindow.open（map，marker）; calculateAndDisplayRoute（directionsService，directionsDisplay，distinationOrigin，destinationMarker ，infowindow）;}}）（marker，i））; }} google.maps.event.addDomListener（window，load，initMap）; var locations = [['The Reef Atlantis'，25.084536，-77.330704，'https://raw.githubusercontent.com/bjhm/ajax- dummyJson / master / hotel.png']，['Oasis Restaurant& Bar'，25.003246，-77.4673455，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png']，['Carmines'，25.08668，-77.32665'https：// raw。 githubusercontent.com/bjhm/ajax-dummyJson/master/food.png']，['Dune'，25.0829234，-77.3114754，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png ''，['Montagu Gardens'，25.0721743，-77.3091388，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png']，['Travelers Rest'，25.0647862，-77.4721588， 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png']，['Lynden Pindling International Airport'，25.0439288，-77.4655212，'https://raw.githubusercontent.com/bjhm /ajax-dummyJson/master/airport.png']，['加拿大皇家银行'，25.0347498，-77.5131047，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png' ]，['Scotia Bank'，25.0194408，-77.3810372，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/ ''CIBC First Caribbean'，25.0765015，-77.3386342，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png']，['Bahamas Development'，25.0699435 ，-77.3915533，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png']，['Cozy Corner Pub'，25.074803，-77.4294573，'https：//raw.githubusercontent。 com / bjhm / ajax-dummyJson / master / bar.png']，['Pirates Pub and Grill'，25.0775677，-77.3447612，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar。 png']，['Beach Shack'，25.0293784，-77.5369602，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png']，['Bamboo Shack'，25.0383471，-77.3409279 ，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png']，['Sea Trek Helmet Diving'，25.0844329，-77.3240519，'https://raw.githubusercontent.com/ bjhm / ajax-dummyJson / master / tour.png']，['Stewarts Cove'，25.00496266，-77.54466321，'https：//raw.githubuserconte nt.com/bjhm/ajax-dummyJson/master/tour.png']，['Bonefish Pond'，24.9851248，-77.4042102，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour。 png']，['Loop View'，25.0439361，-77.3587326，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png']，['Seaworld Explorer'，25.06，-77.345 ，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png']，['Fort Charlotte'，25.0769583，-77.268455，'https://raw.githubusercontent.com/bjhm/ ajax-dummyJson / master / tour.png']，['Prince Charles Shopping Center'，25.0433013，-77.3168743，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']， ['Seagrapes Shopping Plaza'，25.0371946，-77.2808844，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，['Caves Village'，25.0676409，-77.4517465'https ：//raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，['旧堡湾镇中心'，25.0467254，-77.4 932671，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，['Fendi'，25.06，-77.345，'https://raw.githubusercontent.com/bjhm/ ajax-dummyJson / master / shop.png']，['John Chea'，25.014643，-77.3945644，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，[' Bamboo Bamboo'，25.0344436，-77.5133997，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，['Albany Water Sports'，25.001501，-77.5133815，'https：/ /raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png']，['Sandyport Plaza'，25.0761927，-77.4280786，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master /shop.png']，['国家艺术博物馆'，25.075424，-77.347321，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png']，['Fort Fincastle'， 25.06，-77.345，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png']，['Queens Staircase'，25.0759204， -77.3378813，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png']，['Balcony House'，25.0767534，-77.3436895，'https://raw.githubusercontent.com/ bjhm / ajax-dummyJson / master / destination.png']，['Albany Golf Course'，25.0125127，-77.5031764，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png'] ，['Blue Shark Golf Course'，25.00571，-77.5261129，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png']，['Lynford Cay网球中心'，25.0285459， - 77.534265，'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png']，['Cable Beach Golf Course'，25.0673443，-77.3941654，'https://raw.githubusercontent.com /bjhm/ajax-dummyJson/master/sport.png']]
html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//
I have built a custom map that builds directions from a single point to a clicked marker, however I am having trouble figuring out how to display the total distance and travel duration in the info window.
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay;
directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "red"
}
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(25.03086141, -77.39945412),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var locations = [
['The Reef Atlantis', 25.084536, -77.330704, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/hotel.png'],
['Oasis Restaurant & Bar', 25.003246, -77.4673455, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
['Carmines', 25.08668, -77.32665, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
['Dune', 25.0829234, -77.3114754, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
['Montagu Gardens', 25.0721743, -77.3091388, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
['Travellers Rest', 25.0647862, -77.4721588, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
['Lynden Pindling International Airport', 25.0439288, -77.4655212, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/airport.png'],
['The Royal Bank of Canada', 25.0347498, -77.5131047, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
['Scotia Bank', 25.0194408, -77.3810372, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
['CIBC First Caribbean', 25.0765015, -77.3386342, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
['Bahamas Development', 25.0699435, -77.3915533, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
['Cozy Corner Pub', 25.074803, -77.4294573, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png'],
['Pirates Pub and Grill', 25.0775677, -77.3447612, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png'],
['Beach Shack', 25.0293784, -77.5369602, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png'],
['Bamboo Shack', 25.0383471, -77.3409279, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png'],
['Sea Trek Helmet Diving', 25.0844329, -77.3240519, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Stewarts Cove', 25.00496266, -77.54466321, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Bonefish Pond', 24.9851248, -77.4042102, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Loop View', 25.0439361, -77.3587326, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Seaworld Explorer', 25.06, -77.345, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Fort Charlotte', 25.0769583, -77.268455, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Prince Charles Shopping Centre', 25.0433013, -77.3168743, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Seagrapes Shopping Plaza', 25.0371946, -77.2808844, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Caves Village', 25.0676409, -77.4517465, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Old Fort Bay Town Centre', 25.0467254, -77.4932671, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Fendi', 25.06, -77.345, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['John Chea', 25.014643, -77.3945644, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Bamboo Bamboo', 25.0344436, -77.5133997, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Albany Water Sports', 25.001501, -77.5133815, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Sandyport Plaza', 25.0761927, -77.4280786, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['National Art Museum', 25.075424, -77.347321, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png'],
['Fort Fincastle', 25.06, -77.345, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png'],
['Queens Staircase', 25.0759204, -77.3378813, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png'],
['Balcony House', 25.0767534, -77.3436895, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png'],
['Albany Golf Course', 25.0125127, -77.5031764, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png'],
['Blue Shark Golf Course', 25.00571, -77.5261129, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png'],
['Lynford Cay Tennis Centre', 25.0285459, -77.534265, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png'],
['Cable Beach Golf Course', 25.0673443, -77.3941654, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png']
]
var marker, i;
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var distinationOrigin = new google.maps.LatLng(25.084536, -77.330704);
var destinationMarker = locations[i][1] + ',' + '' + locations[i][2];
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
calculateAndDisplayRoute(directionsService, directionsDisplay, distinationOrigin, destinationMarker);
}
})(marker, i));
}
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, distinationOrigin, destinationMarker) {
directionsService.route({
origin: distinationOrigin,
destination: destinationMarker,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
解决方案
You need to calculate the total distance and time from the data in the directions response. Related question: Distance from point A to B using Google Maps, PHP and MySQL (my answer, not the accepted answer, does that).
calculate the total distance and time:
function computeTotals(result, infowindow) {
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.
infowindow.setContent(infowindow.getContent()+"<br>total distance=" + totalDist.toFixed(2) + " km (" + (totalDist * 0.621371).toFixed(2) + " miles)<br>total time=" + (totalTime/60).toFixed(2) + " minutes");
}
call it and put the total distance and time in the infowindow:
function calculateAndDisplayRoute(directionsService, directionsDisplay, distinationOrigin, destinationMarker, infowindow) {
directionsService.route({
origin: distinationOrigin,
destination: destinationMarker,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
computeTotals(response, infowindow);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
code snippet:
function calculateAndDisplayRoute(directionsService, directionsDisplay, distinationOrigin, destinationMarker, infowindow) {
directionsService.route({
origin: distinationOrigin,
destination: destinationMarker,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
computeTotals(response, infowindow);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function computeTotals(result, infowindow) {
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.
infowindow.setContent(infowindow.getContent() + "<br>total distance=" + totalDist.toFixed(2) + " km (" + (totalDist * 0.621371).toFixed(2) + " miles)<br>total time=" + (totalTime / 60).toFixed(2) + " minutes");
}
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay;
directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: "red"
}
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(25.03086141, -77.39945412),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var marker, i;
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var distinationOrigin = new google.maps.LatLng(25.084536, -77.330704);
var destinationMarker = locations[i][1] + ',' + '' + locations[i][2];
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
calculateAndDisplayRoute(directionsService, directionsDisplay, distinationOrigin, destinationMarker, infowindow);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, "load", initMap);
var locations = [
['The Reef Atlantis', 25.084536, -77.330704, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/hotel.png'],
['Oasis Restaurant & Bar', 25.003246, -77.4673455, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
['Carmines', 25.08668, -77.32665, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
['Dune', 25.0829234, -77.3114754, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
['Montagu Gardens', 25.0721743, -77.3091388, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
['Travellers Rest', 25.0647862, -77.4721588, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
['Lynden Pindling International Airport', 25.0439288, -77.4655212, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/airport.png'],
['The Royal Bank of Canada', 25.0347498, -77.5131047, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
['Scotia Bank', 25.0194408, -77.3810372, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
['CIBC First Caribbean', 25.0765015, -77.3386342, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
['Bahamas Development', 25.0699435, -77.3915533, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
['Cozy Corner Pub', 25.074803, -77.4294573, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png'],
['Pirates Pub and Grill', 25.0775677, -77.3447612, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png'],
['Beach Shack', 25.0293784, -77.5369602, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png'],
['Bamboo Shack', 25.0383471, -77.3409279, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png'],
['Sea Trek Helmet Diving', 25.0844329, -77.3240519, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Stewarts Cove', 25.00496266, -77.54466321, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Bonefish Pond', 24.9851248, -77.4042102, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Loop View', 25.0439361, -77.3587326, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Seaworld Explorer', 25.06, -77.345, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Fort Charlotte', 25.0769583, -77.268455, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/tour.png'],
['Prince Charles Shopping Centre', 25.0433013, -77.3168743, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Seagrapes Shopping Plaza', 25.0371946, -77.2808844, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Caves Village', 25.0676409, -77.4517465, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Old Fort Bay Town Centre', 25.0467254, -77.4932671, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Fendi', 25.06, -77.345, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['John Chea', 25.014643, -77.3945644, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Bamboo Bamboo', 25.0344436, -77.5133997, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Albany Water Sports', 25.001501, -77.5133815, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['Sandyport Plaza', 25.0761927, -77.4280786, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/shop.png'],
['National Art Museum', 25.075424, -77.347321, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png'],
['Fort Fincastle', 25.06, -77.345, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png'],
['Queens Staircase', 25.0759204, -77.3378813, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png'],
['Balcony House', 25.0767534, -77.3436895, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/destination.png'],
['Albany Golf Course', 25.0125127, -77.5031764, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png'],
['Blue Shark Golf Course', 25.00571, -77.5261129, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png'],
['Lynford Cay Tennis Centre', 25.0285459, -77.534265, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png'],
['Cable Beach Golf Course', 25.0673443, -77.3941654, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/sport.png']
]
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
这篇关于Google Maps API V3在信息窗口中显示持续时间和距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
