如何在地图上显示特定路线的实时交通数据

Question

我已经实现了方向API,以使用浏览器/ JavaScript中的Google Maps V3方向API找到从源到目的地的路线.

现在,我想在路径部分中显示下面的快照(来自谷歌地图的快照)中显示的交通状况.

对于不同的交通状况,有没有办法用不同的折线strokeColor这样做？

如果无法使用方向API或流量层,我是否可以使用方向矩阵或道路API的高级版本来实现此功能？

以下是我到目前为止所做的事情以及我的输出:

  var map;
  var directionsService;
  var polyline;
  var directionsDisplay;
  function initMap() {
    directionsDisplay = new google.maps.DirectionsRenderer({
      polylineOptions:{
        strokeOpacity:1,
        strokeWeight:5,
        strokeColor: 'green'
      },
      draggable: true
    });

    directionsService = new google.maps.DirectionsService;
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: {lat: 37.77, lng: -122.447}
    });

    var trafficLayer = new google.maps.TrafficLayer();
    trafficLayer.setMap(map);

    directionsDisplay.setMap(map);
               directionsDisplay.setPanel(document.getElementById('directionsPanel'));

    directionsDisplay.addListener('directions_changed', function() {
      DistanceOut(directionsDisplay.getDirections());
    });
    polyline = new google.maps.Polyline({
      map:map
    });
    calculateAndDisplayRoute(directionsService, directionsDisplay);

  }

  function calculateAndDisplayRoute(directionsService,    directionsDisplay) {

    directionsService.route({
      origin: 'Whitefield, Bangalore',
      destination: 'Indira nagar, Bangalore',

      provideRouteAlternatives: true,
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(Date.now()),
        trafficModel: 'bestguess'
      },
      unitSystem: google.maps.UnitSystem.METRIC

    }, function(response, status) { console.log(response);
      if (status == 'OK') {
        directionsDisplay.setDirections(response);
        DistanceOut(response);
        changeStepColor(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

  function DistanceOut(response){
    document.getElementById("travelDetail").innerHTML = "Distance:"+response.routes[0].legs[0].distance.text+
        "<br> Duration::"+response.routes[0].legs[0].duration.text+
        "<br> Duration in traffic::"+response.routes[0].legs[0].duration_in_traffic.text;
  }

  // Here I want to change the polyline color according to the traffic condition.
  // Can I? Or if any other way to do so?!
  function changeStepColor(res){
    var steps = res.routes[0].legs[0].steps;

    for(i=0; i<steps.length; i++){
      if((steps[i].distance.value/steps[i].duration_in_traffic.value) > 5) {
        //steps[i].polyline.strokeColor='blue';
        //directionsDisplay.setOptions({polylineOptions: {path: steps[i].path ,strokeColor: 'red'}});
      } else {
        //directionsDisplay.setOptions({polylineOptions: {path: steps[i].path ,strokeColor: 'yellow'}});

        //steps[i].polyline.strokeColor='red'
      }
    }
  }

这是我的输出快照:

我希望这可以帮助您理解我的问题.如果需要了解我的问题,请告诉我.

Answer 1

目前,无法仅使用Google Maps JavaScript API路线服务显示路线的流量.您可以通过交通图层显示整个城市的流量,但不能显示单个街道的流量.

高级计划许可证无关紧要,您将获得相同的路线输出.其他API(如Roads API和Distance Matrix API)不会在响应中提供任何与流量相关的信息.

功能请求已在Google问题跟踪器中提交:

https://issuetracker.google.com/issues/36537583

随意添加功能请求,以添加您的投票并订阅来自Google的通知.

更新

看起来Embed API显示路线的交通信息.尝试在路线模式下使用Embed API .这会给你类似的东西