Question

我正在使用Javascript API显示带有路线（基于用户输入）的google地图以及流量图层。它运作良好，但我无法找到一种方法来显示我自定义创建的行上方的相关折线上的流量颜色。这样做的正确方法是什么？

Answer 1

显示流量层

只需显示流量图层即可使用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);
}

这不仅可以让您访问交通图层，还可以访问公交和自行车层。

这是一个有效的例子：

<!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：使用前请确保使用

中的API KEY

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

有关此示例的详细信息，您可以阅读documentation page regarding this example或完整documentation for displaying data（我推荐）。

这不是我想要的

体验通常会告诉我们，当您向用户建议路线时，如果所述路线有红色交通线路，则用户将自动搜索其他内容 - 迫使他进行另一次查询会很麻烦。

因此，交通图层是避免以前行为的好方法。

这也意味着您不能简单地选择图层的一部分（例如，与折线匹配的图层）并将其粘贴到那里 - 这不是图层的目的。

如果这个解决方案不适合你，还有另外一种方法......

路线服务

Directions Service计算两点之间的方向。

使用此服务，您可以将provideRouteAlternatives设置为true并为departureTime设置drivingOptions来发出请求。

根据文件，

departureTime（对于drivesOptions对象文字而言是必需的 valid）指定作为Date对象的所需出发时间。（......）对于Google Maps API Premium Plan客户，如果包含在请求中的departureTime，API返回给定的最佳路由当时的预期交通状况，包括预测响应中的流量时间（duration_in_traffic）。（...）

因此，如果你提出替代路线的请求并且有一个离开时间，你会在每个路线的响应中有一个duration_in_traffic，并且你可以用它来绘制你想要的颜色的多边形，具体取决于它的好坏或者道路很糟糕。

您可以在https://developers.google.com/maps/documentation/javascript/directions

了解有关JavaScript Directions Service的更多信息

这仍然不是我想要的

仅使用Google Maps API和服务，这是您可以做到的。如果这些选项仍然不适合您，那么您需要将地图与来自第三方的流量数据混合。

希望这有帮助！

Answer 2

尝试在路线模式下使用Embed API。您可以在此处找到有关它的详细信息(Embed API in Direction mode)。这是一个看起来像这样的例子。

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

这将为您提供以下输出。

您可以为运行时源动态生成src URL - 目的地流量路径显示。

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

2 个答案:

显示流量层

这不是我想要的

路线服务

这仍然不是我想要的