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

Question

我正在使用谷歌地图,我有点卡在一点.我想显示我的源和目标点的替代路线.目前我正在使用完美工作并显示正确结果的代码,但唯一的问题是此代码仅显示我的起始路径和目标路径的单一路径.

这是我的JSFIDDLE WORKING DEMO

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

HTML代码:

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

您可以在演示中看到当您输入起点和终点时,它会相应地为您提供单一路线,但我需要在地图中显示替代路线.

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

在此先感谢您的帮助,非常感谢

Answer 1

你需要做的是检查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 />");
        }
    }
);