Я внедряю систему, чтобы показать множество маршрутов со всеми остановками, которые должны делать каждый автомобиль на одной карте.У меня есть контроллер для выбора маршрута для показа на карте.Теперь я могу отображать маркеры всех маршрутов, но не все полилинии только один раз.Когда выбрано больше маршрутов, отображаются все маркеры, кроме полилиний последнего выбранного магазина.
Вот мой код
let map;
let directionsService;
let directionsRenderer
let markers = [];
let waypoints = [];
let uluru = {lat: -1.2571434, lng: -78.6566384};
function initMap() {
directionsService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {zoom: 7, center: uluru, mapTypeId: 'roadmap'});
directionsRenderer.setMap(map);
}
function addMarkers(routeName) {
var c = coordinates[routeName]
var pinColor = getRandomColor();
var waypoints = [];
c.forEach(function (item, index)
{
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+ index +"|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var myLatLng = { lat: item[1][0], lng: item[1][1] };
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
icon: pinImage,
title: routeName
});
markers.push(marker);
waypoints.push({location: myLatLng, stopover: false});
});
if( typeof waypoints != 'undefined' && waypoints != null ){
var polylineOptionsActual = {
strokeColor: '#' + pinColor,
strokeOpacity: 1.0,
strokeWeight: 3
};
calculateAndDisplayRoute(waypoints, polylineOptionsActual);
}
}
function calculateAndDisplayRoute(waypts, polylineOptionsActual) {
directionsRenderer.setOptions( { suppressMarkers: true, polylineOptions: polylineOptionsActual } );
var origin1 = waypts.shift().location;
var destination1 = waypts.pop().location;
directionsService.route(
{
origin: origin1,
destination: destination1,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'DRIVING'
},
function(response, status) {
if (status === 'OK') {
directionsRenderer.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
Пример того, что показывает приложение актуально