So zeigen Sie alternative Route mit google map api

Question

Ich benutze google map und ich bin ein bisschen fest an einem Punkt. Ich möchte alternative Route für meine Quelle und Zielpunkt anzeigen. Zur Zeit verwende ich den Code, der einwandfrei funktioniert und das korrekte Ergebnis anzeigt, aber das einzige Problem ist, dass dieser Code nur eine einzige Route für meinen Start- und Zielpfad anzeigt. Hier

ist mein JSFIDDLE WORKING DEMO

Hier ist Beispielcode, die ich verwende in jsfiddle Demo Link:

HTML-Code:

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

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

können Sie in der Demo sehen, wenn Sie Startpunkt und Zielpunkt eingeben, gibt es Ihnen eine einzelne Route entsprechend, aber ich muss alternative Route auch in der Karte anzeigen.

Vielen Dank im Voraus für Ihre Hilfe und viel

geschätzt

Answer 1

Was Sie tun müssen, ist zu überprüfen, wie viele Routen durch die directionsService.route Funktionsaufruf zurückgegeben werden, innerhalb der Callback-Funktion, die wird die Antwort Objekt response.routes empfängt Seien Sie ein Array, durchlaufen Sie es und verwenden Sie den Schleifenzähler, um den routeIndex für den DirectionsRenderer festzulegen. Natürlich ist diese resultierende Ausgabe meiner Meinung nach nicht wünschenswert, da sehr oft Segmente alternativer Routen überlappen, so dass es für einen Benutzer nicht immer visuell offensichtlich ist, was mit den anderen zusätzlichen Zeilen passiert. Sowie wenn Sie tatsächlich die Textrichtungen anzeigen, benötigen Sie ein anderes DOM-Element für die Anzeige jedes Satzes von Richtungen, und dann ist es auch verwirrend, welches Set für was ist. Ich würde eher empfehlen, nur die Hauptroute zu zeigen und Knöpfe zu haben, um Alternativen anzuzeigen, die beim Klicken nur diese Routen zeigen würden. & Richtungen. Das heißt, hier ist die Lösung für Ihre Frage:

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