Google Maps API v3 显示旅行时间答案

【问题标题】：Google Maps API v3 Display Travel TimeGoogle Maps API v3 显示旅行时间
【发布时间】：2019-02-21 15:14:59
【问题描述】：

使用 Google Maps API v3，是否可以在最初打开地图时显示旅行时间？

this link 有一个切换旅行模式的示例。我知道如何设置addEventListener 来监听input change 然后显示行程时间，但我想在地图首次打开/加载时显示行车时间。

我正在模式窗口中打开地图。

以下 JQuery 在我更改输入时有效，但在初始打开时无效。它适用于第二次打开。

$('#travelTime').html('Est. travel time: ' +travelTime);

下面的代码有效，尽管它不包含模式。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Travel Modes in Directions</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
    <b>Mode of Travel: </b>
    <select id="mode">
      <option value="DRIVING">Driving</option>
      <option value="WALKING">Walking</option>
      <option value="BICYCLING">Bicycling</option>
      <option value="TRANSIT">Transit</option>
    </select>
    </div>
    <p id="travelTime"></p> <!-- display time here -->
    <div id="map"></div>
    <script>
      function initMap() {
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var directionsService = new google.maps.DirectionsService;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: {lat: 37.77, lng: -122.447}
        });
        directionsDisplay.setMap(map);

        calculateAndDisplayRoute(directionsService, directionsDisplay);
        document.getElementById('mode').addEventListener('change', function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        });
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var selectedMode = document.getElementById('mode').value;
        directionsService.route({
          origin: {lat: 37.77, lng: -122.447},  
          destination: {lat: 37.768, lng: -122.511},  
          travelMode: google.maps.TravelMode[selectedMode]
        }, function(response, status) {
          if (status == 'OK') {
            directionsDisplay.setDirections(response);
            travelTime = response.routes[0].legs[0].distance.text; // contains correct value 
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

【问题讨论】：

尝试将 calculateAndDisplayRoute 作为回调传递。不确定它是否能解决问题。
谢谢，但我不确定这意味着什么或如何实现它：/

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

在打开模式之前初始化地图。

在页面加载时添加initMap()。

【讨论】：