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

Question

我已经在浏览器/JavaScript中使用Google Maps V3方向API实现了从起点到终点的路线查询。现在，我想在路线部分仅显示如下快照中所示的交通情况（来自Google Maps）。

是否有一种方法可以针对不同的交通状况级别使用不同的折线颜色？

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

这是我的输出快照： 我希望这可以帮助你理解我的问题。如果需要其他信息，请告诉我。

- Jyotirmay

Answer 1

目前，使用Google Maps JavaScript API方向服务无法仅显示某条路线的交通情况。您可以通过Traffic图层显示整个城市的交通情况，但无法显示单个街道的交通情况。无论您是否拥有高级计划许可证，您都将获得相同的方向输出。其他API（如Roads API和Distance Matrix API）在响应中不提供任何与交通相关的信息。该功能请求已在Google问题跟踪器中提交。

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

请放心给该功能请求点赞并订阅来自Google的通知。

更新

看起来嵌入式API显示了路线的交通信息。尝试在导航模式中使用嵌入式API。这将给你类似于以下内容：

- xomena

---

那么像UBER等公司为什么会有这个功能呢？这是他们自己开发的吗？此外，谷歌如何仅显示某条路线的交通情况？ - Jyotirmay

请在代码中添加注释 @xomena - Jyotirmay

另一个解决方法可能是分析 Directions API 响应 中的 duration 和 duration_in_traffic 字段。如果 duration_in_traffic > duration，那么意味着您遇到了比平常更重的交通，否则您遇到了轻度交通。之后，您应该将每个步骤绘制为带有相应颜色的折线。 - xomena

很感谢 @xomena 的帮助。这真的是我一直在寻找的东西。所以最终嵌入式API就是我问题的答案。我还想强调另外一件事，这里的某些人跟我争论说这不可能实现。非常出色的工作..谢谢 :) - Jyotirmay

我们是否也可以在特定路由中注入自己的拥塞反馈，而应用程序仍然像建议其他路线一样正常运行呢？ - Anish Sinha

Answer 2

如果我理解您的问题正确，您想为已创建的路线提供实时交通数据。首先，为了做到这一点，您需要一个Google Maps Premium Plan客户端ID。为了向路线显示交通信息，您需要实现一个Directions Request。以前，您可以使用durationInTraffic，但现在已被弃用。您现在必须使用drivingOptions，然后将其应用于您的自定义折线。

- arde

---

根据我所了解的方向 API，普通版本和高级版本的特性没有区别。您是说要使用 Road API 和 Distance Matrix API 来获取所需的输出吗？@arde - Jyotirmay

你的意思是说，如果我选择高级计划，只要我发送了驾驶选项，那么我的需求就会自动满足吗？@arde - Jyotirmay

是的，回答你的第二个问题。 - arde

Answer 3

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],
        }));
    }
}

- chisom onwuegbuzie