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

这是我的 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>

您可以在演示中看到，当您输入起点和终点时，它会相应地为您提供单一路线，但我还需要在 map 中显示备选路线。

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

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

最佳答案

你需要做的是检查 directionsService.route 函数调用返回了多少条路线，在接收响应对象的回调函数中 response.routes 将是一个数组，因此遍历它并使用循环计数器来设置要使用的 DirectionsRenderer 的 routeIndex。当然，在我看来，这个结果输出根本不是可取的，因为替代路线的部分经常会重叠，因此对于用户来说，其他额外线路的情况并不总是很明显。以及如果您实际显示文本说明，将需要不同的 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 />");
        }
    }
);

关于javascript - 如何使用google map api显示替代路线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18974512/