Google Map с двумя маршрутами, наложенными друг на друга

Question

У меня есть карта, на которой я хочу поместить запланированный маршрут и пройденный маршрут с использованием API маршрутов Google Maps.

Что я делаю, это получить ноги запланированного маршрута и добавить их на карту. Цвет маршрута для этого серый. Затем я добавляю маршрут, который обычно находится на вершине запланированного маршрута. Этот цвет маршрута синий. Я установил непрозрачность запланированного маршрута на 1 и пройденный маршрут до 0,75.

Иногда, когда страница загружается, запланированный маршрут сверху, а иногда и маршрут. Я предполагаю, что он извлекает данные из Google, и он не возвращается в порядке из-за характера Javascript.

То, что я ищу, это всегда делать запланированную нагрузку на маршрут до поездки. Мой план - послушать событие и использовать обещание.

Какие события я должен слушать?

Answer 1

Единственное событие доступно на DirectionsRenderer является directions_changed:

События

directions_changed | Аргументы: Нет

Это событие срабатывает при изменении визуализируемых направлений, когда установлен новый параметр DirectionsResult или когда пользователь заканчивает перетаскивание изменения в путь маршрута.

proof of concept fiddle

фрагмент кода:

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>