2016-06-14 5 views
0

私は2つの場所の間の交通で移動時間を得ようとしています。 私はすべての詳細についてドキュメントガイドに従ってきましたが、トラフィックモデルにかかわらず常に2つのポイント間の固定された旅行時間を得ました:(best_guess、悲観​​的または楽観的)。 また、出発時刻の値を将来別の日付に変更しようとしましたが、私はいつも同じ結果を得ています。Google Maps API for JavascriptからTravelTimeを取得する

編集:私は、標準の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> 
+0

どのような種類のAPIキーを使用していますか?それは標準ですか、プレミアですか? – noogui

+0

標準のAPIキーを使用しています。 –

+0

docsはあなたがプレミアムユーザーである必要があると言っています:) – noogui

答えて

-2

これはあなたのコードとは関係ありません。代わりに、ライセンス供与の問題です。あなたはに属している機能であるDriving Options(BEST_GUESS、OPTIMISTIC、PESSIMISTIC)を使用しています。私が見る方法では、ライセンスを購入してからプレミアムclientIDを使用してから使用する必要があります。

「あなたは DistanceMatrixRequestでdrivingOptionsフィールドを含める場合 APIをロードGoogleマップAPIのプレミアムプランクライアントIDを指定する必要があります。」

あなたのクライアントID

GoogleマップのAPIのプレミアムプランライセンスを購入すると、あなたのクライアントのIDが含まれているGoogleからのウェルカムメールを受信します。 お客様のクライアントIDは、GoogleマップAPIの特別機能にアクセスするために使用されます。プレミアムプランすべてのクライアントIDは、接頭辞gme-で始まります。

このクライアントIDはキーではありません。あなたが許可したURLからしか動作しないので、秘密にすることを心配する必要はありません。

+0

なぜあなたはdownvoted理由を説明しますか? – noogui

+0

間違ったドキュメントにリンクしていますか?そしてbtw、OPは彼が標準APIキーかプレミアムAPIキーを使用しているかどうかは言及しなかった。 – MrUpsidown

+0

@MrUpsidown私はこれを私のコンピュータに複製しました。私も同じ値を得ています。私が答えで提供したドキュメントをチェックしたところ、ドライビングオプション(悲観的、best_guess、楽観的)を使用できるようにするには、プレミアムユーザである必要があると書かれています。プレミアムユーザーは、異なる種類のClientIDを持っています。 OPが求めているのは、あなたがプレミアムユーザーである場合のみです。私が間違って理解したら、あなたの答えを提供してください。 – noogui

0

はたぶんあなたの日付の形式が正しくありませんか? 試してみてください:

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

私は日付形式を変更しようとしました。残念ながら、何も変更されていません。とにかくありがとう。 –

+0

これは動作しません.. – noogui

関連する問題