如何使用谷歌地图 api 显示替代路线 [英] How to display alternative route using google map api

问题描述

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

I am using google map and i am bit of stuck at one point. i want to display alternative route for my source and destination point. currently i am using the code which is working perfectly and displaying correct result but the only the problem is that this code displaying only single route for my starting and destination path.

这是我的 JSFIDDLE 工作演示

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

Here is sample code which i am using in jsfiddle demo link:

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>

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

you can see in the demo when you enter starting point and destination point it will give you single route accordingly but i need to display alternative route as well in the map.

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

Is there any way we can choose and display a route between the given options according to the 'distance' or the 'duration in traffic'?

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

Thanks in advance for your help and much appreciated

推荐答案

你需要做的是检查directionsService.route函数调用返回了多少条路由，在接收响应对象response.routes的回调函数中是一个数组，因此循环遍历它并使用循环计数器设置要使用的 DirectionsRenderer 的 routeIndex.当然，在我看来，这个结果输出根本不是可取的，因为替代路线的部分经常会重叠，因此对于用户来说，其他额外线路的情况并不总是在视觉上显而易见.以及如果您实际显示文本方向，将需要不同的 DOM 元素来显示每组方向，然后令人困惑的是哪个组用于什么.我宁愿建议只显示主要(第一)路线，并有按钮来显示选择，点击后将只显示那些路线 &方向.也就是说，这里是您问题的解决方案:

What you need to do is check how many routes are returned by the directionsService.route function call, within the callback function which receives the response object response.routes will be an array, so loop through it and use the loop counter to set the routeIndex for the DirectionsRenderer to use. Of course this resulting output is not at all in my opinion desirable, as very often segments of alternative routes will overlap so it won't always be visually obvious to a user whats going on with the other extra lines. As well as if you actually display the text directions, will need different DOM element for display of each set of directions, and then it's confusing too which set is for what. I would rather advise showing the main (first) route only and having buttons to display alternatives which upon clicking would show only those routes & directions. That said, here is the fix for your question:

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 />");
        }
    }
);

这篇关于如何使用谷歌地图 api 显示替代路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！