谷歌地图 - 使用API​​获取在该特定路线上放置和查找流量的方向

时间:2016-08-03 13:34:45

标签: javascript jquery html google-maps

我正在尝试使用Google地图方向标识符。有交通细节。

我获得了方向,但没有获得特定选定路径的流量详情。它适用于整体流量。



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

 <div id="floating-panel">
    <b>Start: </b>
    <select id="start">
      <option value="coimbatore, in">coimbatore</option>
      <option value="tirupur, in">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <b>End: </b>
    <select id="end">
      <option value="chicago, il">Chicago</option>
      <option value="tirupur, in">tirupur</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    <div id="map"></div>
    <script>
      function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: {lat:11.0203840, lng: 76.9160980}
        });
        directionsDisplay.setMap(map);

        var onChangeHandler = function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        };
	var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);

        document.getElementById('start').addEventListener('change', onChangeHandler);
        document.getElementById('end').addEventListener('change', onChangeHandler);
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap">
    </script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

无法仅针对特定路线呈现交通信息,也无法使用Google Maps API接收路线的原始流量数据。您唯一的选择是整个边界框的google.maps.TrafficLayer - 因为您已经在使用它。

您可以获取Google API考虑流量的路线的旅行时间,但仅此而已。如果你能以某种方式收到它可能会违反Google地图的服务条款,但我对此并不确定。

也许Bing Maps REST Services - Traffic API可以帮助您接收一些数据,但我不熟悉这个数据,因为不确定它是否只提供有关&#34;事件的数据&#34;或者一般交通。