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

Question

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

kob*_*490 10 javascript google-maps google-maps-api-3 google-polyline

我正在使用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);
}

Run Code Online (Sandbox Code Playgroud)

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

这是一个工作示例:

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

Run Code Online (Sandbox Code Playgroud)

PS:在使用它之前,请确保使用您的API KEY

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

Run Code Online (Sandbox Code Playgroud)

有关此示例的更多信息,您可以阅读有关此示例的文档页面或显示数据的完整文档(我要进行相应的修改).

这不是我想要的

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

因此,流量层是避免先前行为的良好解决方案.

然而,这也意味着您不能简单地选择图层的一部分(例如,与折线匹配的图层)并将其粘贴到那里 - 这不是图层的目的.

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

方向服务

该地图服务,其caluculates两点之间的方向.

使用此服务,您可以provideRouteAlternatives设置为true并departureTime设置为for drivingOptions.

根据文件,

departureTime(drivesOptions对象文字有效所需)指定所需的出发时间作为Date对象.(...)对于Google Maps API Premium Plan客户,如果您在请求中包含departureTime,则API会根据当时的预期流量条件返回最佳路线,并在响应中包含预测的流量时间(duration_in_traffic) .(......)

因此,如果您提出替代路线的请求并且有一个离开时间,您将duration_in_traffic在每个路线的响应中有一个,并且使用它可以根据路径的好坏来绘制您想要的颜色的多边形.

您可以访问https://developers.google.com/maps/documentation/javascript/directions,详细了解JavaScript指引服务

这仍然不是我想要的

只使用谷歌地图API和服务,这是你可以去的.如果这些选项仍然不适合您,那么您需要将地图与来自第三方的流量数据混合.

希望这可以帮助!

归档时间：	10 年，10 月前
查看次数：	4446 次
最近记录：	9 年，4 月前