如何在Google Maps API中的路线折线上显示交通图层

Question

I am using the Javascript API to show a google map with directions (based on user input) along with the traffic layer. 我正在使用Javascript API来显示带有路线（基于用户输入）的google地图以及流量层。 it works well, but i cannot figure out a way to show the traffic colors on the relevant polylines above my custom created line. 它运作良好，但我无法找到一种方法来显示我自定义创建的行上方的相关折线上的流量颜色。 what's the correct way to do this? 这样做的正确方法是什么？

Answer 1

Displaying the Traffic Layer 显示流量层

Simply displaying the traffic layer can be done using the JavaScript API like the following 只需显示流量图层即可使用JavaScript API完成，如下所示

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031}
  });

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

This will not only give you access to the traffic layer, but also to the transit and bicycling layers as well. 这不仅可以让您访问交通图层，还可以访问公交和自行车层。

Here is a working example: 这是一个工作示例：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Traffic layer</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: {lat: 34.04924594193164, lng: -118.24104309082031}
        });

        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

PS: before using it make sure you use your API KEY in PS：在使用它之前，请确保使用您的API KEY

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>

For more information about this example you can read the documentation page regarding this example or the full documentation for displaying data (which i recomemend). 有关此示例的更多信息，您可以阅读有关此示例的文档页面或显示数据的完整文档（我要进行相应的修改）。

This is not exactly what I want 这不是我想要的

Experience usualy tells us that when you are suggesting a route to a user, if the said route has a red traffic line the user will automatically search for something else - forcing him to do another query would be cumbersome. 经验告诉我们，当您向用户建议路线时，如果所述路线有红色交通线路，则用户将自动搜索其他内容 - 迫使他进行另一次查询会很麻烦。

Thus Traffic layers are a good solution to avoid the previous behavior. 因此，流量层是避免先前行为的良好解决方案。

This however also means that you can't simply pick a part of the layer (say, the one matching your polyline) and paste it there - that is not the purpose of layers. 然而，这也意味着您不能简单地选择图层的一部分（例如，与折线匹配的图层）并将其粘贴到那里 - 这不是图层的目的。

If this solution is not good for you, there is another way... 如果这个解决方案不适合你，还有另外一种方法......

Directions Service 方向服务

The Directions Service which caluculates the directions between two points. 指导服务，计算两点之间的方向。

With this Service, you can make a request with provideRouteAlternatives set to true and a departureTime set for drivingOptions . 使用此服务，您可以将provideRouteAlternatives设置为true并为provideRouteAlternatives设置departureTime来drivingOptions 。

According to the documentation, 根据文件，

departureTime (required for the drivingOptions object literal to be valid) specifies the desired time of departure as a Date object. departureTime （drivesOptions对象文字有效）要求将所需的出发时间指定为Date对象。 (...) For Google Maps APIs Premium Plan customers, if you include the departureTime in the request, the API returns the best route given the expected traffic conditions at the time, and includes the predicted time in traffic (duration_in_traffic) in the response. （...）对于Google Maps API Premium Plan客户，如果您在请求中包含departureTime，则API会根据当时的预期流量条件返回最佳路线，并在响应中包含预测的流量时间（duration_in_traffic）。 (...) （......）

So if you make a request for alternative routes and have a departureTime you will have a duration_in_traffic in the reponse for each route, and with it you can draw the polygon with the colour you want depending on how good or bad the path is. 因此，如果你提出了替代路线的请求并且有一个离开duration_in_traffic ，你将在每个路线的响应中有一个duration_in_traffic ，并且你可以根据路径的好坏来绘制你想要的颜色的多边形。

You can read more about JavaScript Directions Service at https://developers.google.com/maps/documentation/javascript/directions 您可以访问https://developers.google.com/maps/documentation/javascript/directions了解有关JavaScript指示服务的更多信息

This is still not what I want 这仍然不是我想要的

Using only Google Maps APIs and Services, this is as far as you can go. 只使用谷歌地图API和服务，这是你可以去的。 If these options still don't suit you then you will need to mix your map with traffic data from third-parties. 如果这些选项仍然不适合您，那么您需要将地图与来自第三方的流量数据混合。

Hope this helps! 希望这可以帮助！

Answer 2

Try to use Embed API in directions mode. 尝试在路线模式下使用Embed API。 Details about it you can find it here (Embed API in Direction mode) . 您可以在此处找到有关它的详细信息（在方向模式下嵌入API）。 Here is an example which looks like this. 这是一个看起来像这样的例子。

  <iframe
    width="600"
    height="450"
    frameborder="0" style="border:0"
    src="https://www.google.com/maps/embed/v1/directions?key=YOUR_API_KEY&origin=indira+nagar+Bangalore&destination=Whitefield+Bangalore&avoid=tolls|highways" allowfullscreen>
  </iframe>

Which will give you below output. 哪个会给你以下输出。

You can generate src URL dynamically for run time source - destination traffic route display. 您可以为运行时源动态生成src URL - 目标流量路由显示。

如何在Google Maps API中的路线折线上显示交通图层

问题描述

2 个解决方案

解决方案1
6 已采纳 2016-09-08 15:18:16

Displaying the Traffic Layer 显示流量层

This is not exactly what I want 这不是我想要的

Directions Service 方向服务

This is still not what I want 这仍然不是我想要的

解决方案2
2 2017-01-26 14:25:26

如何在Google Maps API中的路线折线上显示交通图层

问题描述

2 个解决方案

解决方案1 6 已采纳 2016-09-08 15:18:16

Displaying the Traffic Layer 显示流量层

This is not exactly what I want 这不是我想要的

Directions Service 方向服务

This is still not what I want 这仍然不是我想要的

解决方案2 2 2017-01-26 14:25:26

解决方案1
6 已采纳 2016-09-08 15:18:16

解决方案2
2 2017-01-26 14:25:26