如何在谷歌地图API中将交通图层显示在方向折线之上

10
我正在使用Javascript API显示一个谷歌地图并根据用户输入显示方向,同时显示交通层。它工作正常,但我无法找到一种方法来在我自定义的线路上显示相关的道路交通颜色。请问正确的做法是什么?
2个回答

6

显示交通图层

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

提示:在使用之前,请确保在中使用您的API密钥

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

如果您想了解更多关于本示例的信息,可以阅读有关此示例的文档页面或完整的显示数据的文档(我建议阅读后者)。

这不完全是我想要的

经验通常告诉我们,当为用户提供路线建议时,如果所述路线有红色交通线,用户将自动搜索其他选项 - 强制他执行另一个查询会很麻烦。

因此,交通图层是避免上述行为的好方法。

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

如果这个解决方案对您来说不好,还有另一种方式……

方向服务

方向服务可计算两点之间的路线。

使用该服务,可以设置provideRouteAlternatives为true并为drivingOptions设置departureTime,然后发出请求。

根据文档:

departureTime (必须为drivingOptions对象字面值设置)指定所需的出发时间作为Date对象。(...) 对于Google Maps APIs高级版客户,如果在请求中包含了出发时间,则API将返回在该时间预期的交通状况下给出的最佳路线,并在响应中包括交通预测时间(duration_in_traffic)。(...)

因此,如果您请求备选路线并设置出发时间,则每条路线的响应中都会有一个duration_in_traffic,您可以根据路径的好坏绘制多边形并设置颜色。

您可以在https://developers.google.com/maps/documentation/javascript/directions上了解更多关于JavaScript方向服务的信息。

这还不是我想要的

仅使用Google地图API和服务,这就是您可以做到的。如果这些选项仍不适合您,那么您需要将您的地图与第三方的交通数据混合使用。


希望对您有所帮助!


1
最好只为所选的源和目标路径获取流量。 - Shashank Sood
这并不完全是所要求的问题。如何在从源到目的地的选定方向上显示交通颜色。就像当您搜索从一个地方到另一个地方的路线时,谷歌地图会显示的那样。 - Jyotirmay
@Jyotirmay,我不同意。考虑到地图API的当前状态,这是他能得到的最接近他想要的东西。我认为,鉴于回答中所付出的努力和时间以及可用的可能性范围,对我的回答进行负评是过于苛刻的。 - Flame_Phoenix

2
尝试在导航模式下使用嵌入API。您可以在此处找到有关它的详细信息(嵌入API中的导航模式)。 以下是一个示例,看起来像这样。
  <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,以显示运行时源 - 目的地流量路由。


1
谢谢你的建议-这正是我想要的! - Nicholas
1
感谢@Jyotirmay提供的方法,它对我们也很有效。但是我们发现如果添加了途经点,就不会显示交通颜色。不知道这是否是嵌入式API的bug还是故意设计的。有没有什么解决方法? - YGLin
1
嘿@YGLin,很抱歉,但我很久以前就处理过它,现在已经完全忘记了。你需要从你的角度进行更多的研究。 :) 我现在对此毫无帮助。如果这个答案对你有所帮助,请点赞。 :) 谢谢。 - Jyotirmay

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接