如何使用谷歌地图 API 显示替代路线

How to display alternative route using google map api

本文关键字：代路 显示 API 何使用 谷歌地图      更新时间：2023-09-26

我正在使用谷歌地图，我有点卡在一点上。 我想显示我的源点和目标点的替代路线。 目前我正在使用运行良好并显示正确结果的代码，但唯一的问题是此代码仅显示我的起始路径和目标路径的单一路线。

这是我的JSFIDDLE工作演示

这是我在jsfiddle演示链接中使用的示例代码：

网页代码： 

<h1>Calculate your route</h1>
<form id="calculate-route" name="calculate-route" action="#" method="get">
  <label for="from">From:</label>
  <input type="text" id="from" name="from" required="required" placeholder="An address" size="30" />
  <a id="from-link" href="#">Get my position</a>
  <br />
  <label for="to">To:</label>
  <input type="text" id="to" name="to" required="required" placeholder="Another address" size="30" />
  <a id="to-link" href="#">Get my position</a>
  <br />
  <input type="submit" />
  <input type="reset" />
</form>

JS代码：

<script>
  function calculateRoute(from, to) {
    // Center initialized to Naples, Italy
    var myOptions = {
      zoom: 10,
      center: new google.maps.LatLng(40.84, 14.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // Draw the map
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
    var directionsService = new google.maps.DirectionsService();
    var directionsRequest = {
      origin: from,
      destination: to,
      provideRouteAlternatives: true,
      travelMode: google.maps.DirectionsTravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.METRIC
    };
    directionsService.route(
      directionsRequest,
      function(response, status)
      {
        if (status == google.maps.DirectionsStatus.OK)
        {
          new google.maps.DirectionsRenderer({
            map: mapObject,
            directions: response
          });
        }
        else
          $("#error").append("Unable to retrieve your route<br />");
      }
    );
  }
  $(document).ready(function() {
    // If the browser supports the Geolocation API
    if (typeof navigator.geolocation == "undefined") {
      $("#error").text("Your browser doesn't support the Geolocation API");
      return;
    }
    $("#from-link, #to-link").click(function(event) {
      event.preventDefault();
      var addressId = this.id.substring(0, this.id.indexOf("-"));
      navigator.geolocation.getCurrentPosition(function(position) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
          "location": new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
        },
        function(results, status) {
          if (status == google.maps.GeocoderStatus.OK)
            $("#" + addressId).val(results[0].formatted_address);
          else
            $("#error").append("Unable to retrieve your address<br />");
        });
      },
      function(positionError){
        $("#error").append("Error: " + positionError.message + "<br />");
      },
      {
        enableHighAccuracy: true,
        timeout: 10 * 1000 // 10 seconds
      });
    });
    $("#calculate-route").submit(function(event) {
      event.preventDefault();
      calculateRoute($("#from").val(), $("#to").val());
    });
  });
</script>

您可以在演示中看到，当您输入起点和目的地时，它会相应地为您提供一条路线，但我也需要在地图上显示替代路线。

有什么方法可以根据"距离"或"交通持续时间"在给定选项之间选择和显示路线？

提前感谢您的帮助，非常感谢

你需要做的是检查 directionsService.route 函数调用返回了多少条路由，在接收响应对象 response.routes 的回调函数中，路由将是一个数组，因此循环遍历它并使用循环计数器设置 routeIndex 供 DirectionsRenderer 使用。当然，在我看来，这种生成的输出根本不是可取的，因为替代路线的段通常会重叠，因此用户在视觉上并不总是很明显其他额外线路的情况。以及如果您实际显示文本方向，则需要不同的 DOM 元素来显示每组方向，然后也混淆了哪一组用于什么。我宁愿建议仅显示主要（第一）路线，并具有显示替代方案的按钮，单击后将仅显示这些路线和方向。也就是说，这是您问题的解决方法：

directionsService.route(
    directionsRequest,
    function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            for (var i = 0, len = response.routes.length; i < len; i++) {
                new google.maps.DirectionsRenderer({
                    map: mapObject,
                    directions: response,
                    routeIndex: i
                });
            }
        } else {
            $("#error").append("Unable to retrieve your route<br />");
        }
    }
);
相关文章：