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

我已经在browser/JavaScript中使用GoogleMapsV3方向API实现了方向API，以找出从源到目标的路线

现在，我只想在路线部分显示如下快照（来自谷歌地图的快照）所示的交通状况

对于不同级别的交通状况，是否有方法使用不同的多段线笔划颜色

如果无法使用方向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'
      }
    }
  }

var映射；
var定向服务；
var多段线；
var方向显示；
函数initMap（）{
directionsDisplay=新建google.maps.DirectionsRenderer({
多段线选项：{
频闪不透明度：1，
冲程重量：5，
strokeColor:“绿色”
},
德拉格布尔：是的
});
directionsService=新的google.maps.directionsService；
map=new google.maps.map（document.getElementById（'map'）{
缩放：14，
中心：{lat:37.77，lng:-122.447}
});
var trafficLayer=new google.maps.trafficLayer（）；
trafficLayer.setMap（地图）；
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'directionsPanel'）；
directionsDisplay.addListener（'directions\u changed'，function（）{
DistanceOut（directionsDisplay.getDirections（））；
});
polyline=新的google.maps.polyline({
地图：地图
});
计算显示路线（方向服务、方向显示）；
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
方向服务.路线({
来源：“班加罗尔怀特菲尔德”，
目的地：“班加罗尔英迪拉纳加尔”，
ProviderRouteAlternatives:正确，
travelMode:‘驾驶’，
驾驶选项：{
出发时间：新日期（Date.now（）），
流量模型：“最佳猜测”
},
unitSystem:google.maps.unitSystem.METRIC
}，函数（响应，状态）{console.log（响应）；
如果（状态=‘正常’）{
方向显示。设置方向（响应）；
距离输出（响应）；
变色（反应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
功能距离输出（响应）{
document.getElementById（“travelDetail”）.innerHTML=“距离：”+response.routes[0]。legs[0]。Distance.text+
“
持续时间：：”+response.routes[0]。legs[0]。Duration.text+
“
流量中的持续时间：：”+response.routes[0]。legs[0]。Duration\u in_traffic.text；
}
//这里我想根据交通状况更改多段线的颜色。
//我可以吗？或者如果有其他方法可以做到的话？！
功能更改步骤颜色（res）{
var steps=res.routes[0]。legs[0]。steps；
对于（i=0；i=5）{
//步骤[i].polyline.strokeColor='blue'；
//directionsDisplay.setOptions（{polylineOptions:{path:steps[i].path，strokeColor:'red'}}）；
}否则{
//directionsDisplay.setOptions（{polylineOptions:{path:steps[i].path，strokeColor:'yellow'}}）；
//步骤[i]。多段线。strokeColor='red'
}
}
}

这是我的输出快照：

---

我希望这能帮助你理解我的问题。如果需要了解我的问题，请告诉我。

如果我正确理解您的问题，您希望为已建成的路线提供实时交通数据。首先，为了做到这一点，您需要一个Google Maps Premium Plan客户端ID。为了显示路线的交通信息，您需要实现一个。以前，您可以使用

durationInTraffic

，但现在已经被弃用了。现在必须使用，然后才能将其应用于自定义多段线

目前不可能仅使用Google Maps JavaScript API方向服务显示路线的流量。您可以通过交通层显示整个城市的交通，但不能显示单个街道的交通

Premium plan许可证并不重要，您将获得相同的方向输出。其他API（如道路API和距离矩阵API）不会在响应中提供任何与交通相关的信息

功能请求已提交到Google issue tracker：

您可以随时启动该功能请求，添加您的投票并订阅来自谷歌的通知

已更新

看起来嵌入API显示了路线的交通信息。尝试在中使用嵌入API。这会给你一些

---

正如我在direction api中看到的，普通和高级计划的功能没有区别。你是说要使用Road api和distanceMatrix api来获得所需的输出吗@Arder或者你的意思是说，如果我选择高级计划，只要我发送驾驶选项，我已经满足的要求将自动实现@是的，请回答你的第二个问题。既然如此，像优步这样的公司怎么会有这个功能？这是他们自己发展出来的吗？此外，谷歌如何只显示一条路线的流量？请评论@Xomenano不确定Uber如何获得这些数据，但无法通过方向API或距离矩阵API获得这些数据。可能您可以使用嵌入API作为解决方案。另一个解决方案可能是分析Directions API中的duration和duration_in_traffic字段。如果duration_in_traffic>duration，则表示您的流量比平时大，否则您的流量会变小。之后，您应该将每个步骤绘制为具有相应颜色的多段线。非常有帮助@xomena。这真是我一直在寻找的东西。因此，最终嵌入API是我的查询的答案。我还想把灯放在别的东西上，这里的哑巴和我吵架说这是不可能的。干得好。。谢谢。：）

import Polyline from '@mapbox/polyline';

const origin = `${currentPosition.latitude}, ${currentPosition.longitude}`; 
const destination = `${User.latitude}, ${User.longitude}`; 

try {
    const waypoints = this.outletCoordinates.map(waypoint => 
      `${waypoint.latitude},${waypoint.longitude}`).join('|');
    const url = `https://maps.googleapis.com/maps/api/directions/json?origin=${origin}&destination=${destination}&waypoints=optimize:true|${waypoints}&key=${Config.GOOGLE_MAPS_API_KEY}&mode=DRIVING`;

    const mapUrl = await fetch(url); 
    const respJson = await mapUrl.json();
    const routes = _.get(respJson, 'routes', []);
    if (routes.length > 0 && routes[0]) {
        const routeDescrip = routes[0]; 
        const [summaryLeg] = routeDescrip.legs || []; 
        const points = Polyline.decode(routeDescrip.overview_polyline.points); 
        const optimizedRoutes = points.map(point => ({
          latitude: point[0],
          longitude: point[1],
        }));
    }
}