如何在 google 地图 API 中的方向多段线顶部显示交通图层

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 in

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

有关此示例的更多信息，您可以阅读 documentation page regarding this example or the full documentation for displaying data（我推荐）。

这不是我想要的

通常的经验告诉我们，当您向用户建议路线时，如果该路线有红色交通线，用户将自动搜索其他内容 - 强迫他进行其他查询会很麻烦。

因此交通层是避免先前行为的一个很好的解决方案。

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

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

路线服务

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

使用此服务，您可以将 provideRouteAlternatives 设置为 true 并将 departureTime 设置为 drivingOptions。

根据文档，

departureTime (required for the drivingOptions object literal to be valid) specifies the desired time of departure as a Date object. (...) 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. (...)

因此，如果您请求替代路线并且有 departmentTime，您将在每条路线的响应中得到一个 duration_in_traffic，并且您可以使用它来绘制具有所需颜色的多边形，具体取决于如何这条路是好是坏。

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

阅读有关 JavaScript 路线服务的更多信息

这还是不是我想要的

仅使用 Google 地图 API 和服务，这是您所能达到的极限。如果这些选项仍然不适合您，那么您需要将您的地图与来自第三方的交通数据混合使用。

希望对您有所帮助！

Answer 2

尝试在路线模式中使用嵌入 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 地图 API 中的方向多段线顶部显示交通图层

How to show Traffic layer on top of Directions polyline in google maps API

javascript

google-maps

google-maps-api-3

google-polyline

显示流量层

这不是我想要的

路线服务

这还是不是我想要的