Jak wyświetlić alternatywną trasę za pomocą mapy google api

Question

Używam mapy google i jestem trochę utknąć w jednym punkcie. Chcę wyświetlić alternatywną trasę dla mojego punktu źródłowego i docelowego. obecnie używam kodu, który działa idealnie i wyświetla prawidłowy wynik, ale jedynym problemem jest to, że ten kod wyświetla tylko jedną trasę dla mojej ścieżki początkowej i docelowej.

Oto mój JSFIDDLE WORKING DEMO

Oto kod próbka którego używam w jsfiddle linku demo: Kod

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

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

można zobaczyć w wersji demonstracyjnej po wprowadzeniu punktu początkowego i docelowego, otrzymasz jedną trasę odpowiednio, ale muszę wyświetlić alternatywną trasę, jak również na mapie.

Dzięki z góry za pomoc i bardzo doceniane

Answer 1

Co trzeba zrobić, to sprawdzić ile trasy są zwracane przez wywołanie funkcji directionsService.route, w funkcji zwrotnej, która odbiera response.routes obiektów odpowiedź będzie być tablicą, przeprowadź przez nią pętlę i użyj licznika pętli, aby ustawić routeIndex dla obiektu TargetRenderer do użycia. Oczywiście wynik ten nie jest moim zdaniem pożądany, ponieważ bardzo często odcinki alternatywnych tras będą się nakładać, więc nie zawsze będzie oczywiste dla użytkownika, co dzieje się z innymi dodatkowymi liniami. Podobnie jak w przypadku wyświetlania wskazówek tekstowych, potrzebny będzie inny element DOM do wyświetlenia każdego zestawu kierunków, a także zbyt mylące, który zestaw jest do czego. Radziłbym raczej wskazać główną (pierwszą) tylko trasę i mając przyciski do wyświetlania alternatyw, które po kliknięciu wskazywałyby tylko te trasy &. To powiedziawszy, oto poprawka na twoje pytanie:

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