Google Map mit zwei übereinander liegenden Routen

Question

Ich habe eine Karte, auf der ich eine geplante Route und eine gereiste Route mit der Google Maps Route API einfügen möchte.

Was ich mache ist, die Beine der geplanten Route zu bekommen und diese zur Karte hinzuzufügen. Die Farbe der Route ist grau. Dann füge ich die Reiseroute hinzu, die normalerweise auf der geplanten Route liegt. Diese Routenfarbe ist blau. Ich setze die Deckkraft der geplanten Route auf 1 und die gefahrene Route auf .75.

Manchmal, wenn die Seite geladen wird, ist die geplante Route oben und manchmal die zurückgelegte Route. Ich nehme an, dass es die Daten von Google holt und es wegen der Natur von Javascript nicht zurückkommt.

Was ich suche, ist immer die geplante Route Last vor dem Reisen zu machen. Mein Plan ist, auf eine Veranstaltung zu hören und ein Versprechen zu halten.

Auf welche Ereignisse sollte ich achten?

Answer 1

Das einzige Ereignis auf dem DirectionsRenderer ist directions_changed:

Events

directions_changed | Argumente: Keine

Dieses Ereignis wird ausgelöst, wenn sich die gerenderten Richtungen ändern, entweder wenn ein neues DirectionsResult festgelegt wird oder wenn der Benutzer das Ziehen einer Änderung in den Routenpfad beendet.

proof of concept fiddle

Code-Schnipsel:

var map; 
 
var directionsService; 
 
var directionsDisplays = []; 
 

 
function initMap() { 
 
    directionsService = new google.maps.DirectionsService; 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 7, 
 
    center: { 
 
     lat: 41.85, 
 
     lng: -87.65 
 
    } 
 
    }); 
 
    var directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    directionsDisplays.push(directionsDisplay); 
 
    calculateAndDisplayRoute("New York, NY", "Los Angeles, CA", { 
 
    strokeWeight: 8, 
 
    strokeOpacity: 1.0, 
 
    strokeColor: "white" 
 
    }, true); 
 
    // directionsDisplay.setMap(map); 
 
    google.maps.event.addListener(directionsDisplays[0], 'directions_changed', function() { 
 
    var directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    directionsDisplays.push(directionsDisplay); 
 
    calculateAndDisplayRoute("New York, NY", "Denville,NJ", { 
 
     strokeWeight: 4, 
 
     strokeOpacity: 0.5, 
 
     strokeColor: "blue" 
 
    }, false); 
 
    }); 
 

 
} 
 

 
function calculateAndDisplayRoute(start, end, options, preserveViewport) { 
 
    directionsService.route({ 
 
    origin: start, 
 
    destination: end, 
 
    travelMode: 'DRIVING' 
 
    }, function(response, status) { 
 
    if (status === 'OK') { 
 
     directionsDisplays[directionsDisplays.length - 1].setOptions({ 
 
     map: map, 
 
     polylineOptions: options, 
 
     preserveViewport: preserveViewport 
 
     }); 
 
     directionsDisplays[directionsDisplays.length - 1].setDirections(response); 
 
    } else { 
 
     window.alert('Directions request failed due to ' + status); 
 
    } 
 
    }); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
} 
 
#floating-panel { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 25%; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
}

<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
</script>