Google Maps API V3在信息窗口中显示持续时间和距离

Question

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);
        }
    });
}

Answer 1

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);
    }
  });
}

proof of concept fiddle

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map"></div>