Cách hiển thị tuyến đường thay thế bằng cách sử dụng bản đồ google api

Question

Tôi đang sử dụng bản đồ google và tôi bị kẹt ở một thời điểm. tôi muốn hiển thị tuyến đường thay thế cho nguồn và điểm đích của tôi. hiện tại tôi đang sử dụng mã đang hoạt động hoàn hảo và hiển thị kết quả chính xác nhưng vấn đề duy nhất là mã này chỉ hiển thị tuyến đường duy nhất cho đường dẫn bắt đầu và đích của tôi.

Đây là tôi JSFIDDLE WORKING DEMO

Đây là mẫu mã mà tôi đang sử dụng trong liên kết giới thiệu jsfiddle:

HTML Mã sản phẩm:

<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 Mã sản phẩm:

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

bạn có thể thấy trong bản giới thiệu khi bạn nhập điểm xuất phát và điểm đến, nó sẽ cung cấp cho bạn tuyến đường phù hợp nhưng tôi cần phải hiển thị tuyến đường thay thế cũng như trên bản đồ.

Cảm ơn trước sự giúp đỡ của bạn và nhiều đánh giá cao

Answer 1

Những gì bạn cần làm là kiểm tra có bao nhiêu tuyến đường được trả về bởi các cuộc gọi chức năng directionsService.route, bên trong hàm callback mà nhận được response.routes đối tượng phản ứng sẽ là một mảng, do đó, lặp qua nó và sử dụng bộ đếm vòng lặp để thiết lập routeIndex cho DirectionsRenderer để sử dụng. Tất nhiên kết quả đầu ra này hoàn toàn không theo ý kiến ​​của tôi, vì các phân đoạn thay thế thường xuyên sẽ chồng lên nhau nên không phải lúc nào cũng rõ ràng với người dùng đang diễn ra với các dòng phụ khác. Cũng như nếu bạn thực sự hiển thị các hướng văn bản, sẽ cần phần tử DOM khác nhau để hiển thị từng bộ chỉ đường, và sau đó nó gây nhầm lẫn quá mà thiết lập là cho những gì. Tôi thà tư vấn cho thấy chính (đầu tiên) tuyến đường duy nhất và có các nút để hiển thị lựa chọn thay thế mà khi nhấp vào sẽ chỉ hiển thị những tuyến đường & hướng. Điều đó nói rằng, đây là bản sửa lỗi cho câu hỏi của bạn:

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