从 Google Maps API for Javascript 获取 TravelTime答案

【问题标题】：Getting TravelTime from Google Maps API for Javascript从 Google Maps API for Javascript 获取 TravelTime
【发布时间】：2016-06-14 15:16:08
【问题描述】：

我正在尝试获取两个位置之间的交通时间。我遵循了文档指南的所有细节，但无论交通模型如何，我总是在两点之间获得固定的旅行时间：（best_guess，悲观或乐观）。另外，我尝试将出发时间的值更改为将来的不同日期，但我总是得到相同的结果。

编辑：

我使用的是标准 API 密钥。另外，我尝试更改 [departureTime:] 的日期格式，但没有帮助。

我的主要目标是获得交通链接的旅行时间。

感谢您的帮助。

这是我的 HTML 和 Javascriptcode：

<!DOCTYPE html>
<html>
  <head>
      <link rel="shortcut icon" href="">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Displaying text directions with <code>setPanel()</code></title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      #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;
      }
      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      #right-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
      }
      #map {
        margin-right: 400px;
      }
      #floating-panel {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }
      @media print {
        #map {
          height: 500px;
          margin: 0;
        }
        #right-panel {
          float: none;
          width: auto;
        }
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <strong>Get TravelTime in Traffic</strong>
    </div>
    <div id="right-panel"></div>
    <div id="map"></div>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&callback=initMap">
    </script>
    <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: 12, 
          center: {lat: 30.114114, lng: 31.420595}
        });
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('right-panel'));

        var control = document.getElementById('floating-panel');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);


       calculateAndDisplayRoute(directionsService, directionsDisplay);


      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {

        directionsService.route({
          origin: "11 The Ring Road, Al Khosous, Al Khankah, Al Qalyubia Governorate, Egypt",
          destination: " El-Shams Sporting Club, Al Matar, Qism El-Nozha, Cairo Governorate, Egypt",
          travelMode: google.maps.TravelMode.DRIVING,
          drivingOptions: {

            departureTime: new Date("June 14, 2016 11:13:00"),
            trafficModel: google.maps.TrafficModel.PESSIMISTIC
          }
        }, function(response, status) {
          if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>

  </body>
</html>

【问题讨论】：

您使用的是哪种 API 密钥？是标准版还是高级版？
我使用的是标准 API 密钥。
docs 声明您需要成为高级用户 :)

标签： javascript html google-maps google-maps-api-3 traffic

【解决方案1】：

这似乎与您的代码无关。相反，这是一个许可问题。您正在使用Driving Options (BEST_GUESS, OPTIMISTIC, PESSIMISTIC) 这是属于Premium Plan clients 的功能。在我看来，您需要先购买许可证并使用高级客户端 ID，然后才能使用它。

“您必须在以下情况下提供 Google Maps API 高级计划客户端 ID 如果您想在距离矩阵请求。”

您的客户 ID

购买 Google Maps API 高级计划许可后，您将收到一封来自 Google 的欢迎电子邮件，其中包含您的客户端 ID。 您的客户端 ID 用于访问 Google Maps API 高级计划的特殊功能。所有客户端 ID 都以 gme- 前缀开头。

此客户端 ID 不是密钥。它仅适用于您授权的 URL，因此您无需担心保密。

【讨论】：

因为您链接到错误的文档？顺便说一句，OP 没有提到他使用的是标准 API 密钥还是高级 API 密钥。
@MrUpsidown 我在我的电脑上复制了这个。我也得到相同的值。当我检查我在回答中提供的文档时，它指出您需要成为高级用户才能使用驾驶选项（悲观、最佳猜测、乐观）。高级用户有不同类型的 ClientID。仅当您是高级用户时，OP 要求的内容才可用。如果我理解错了，请提供您的答案。
我说的是您链接到了错误的文档（DistanceMatrix 而不是 Directions），并且我们不知道 OP 是使用 API 的高级帐户还是标准帐户...
您好 noogui，这是否意味着无法使用标准 API 密钥获取交通出行时间？
好好阅读文档。我认为这已经说得很清楚了。

【解决方案2】：

也许您的日期格式不正确？试试看：

departureTime: new Date("2016-06-14T11:13:00");

【讨论】：

我已尝试更改日期格式。不幸的是，什么都没有改变。还是谢谢。