У меня есть проблема с отображением нескольких маршрутов, которые связаны с конкретным инцидентом на карте Google. Например, см. Изображение ниже (представьте себе инцидент и транспортные средства, прикрепленные к этому конкретному инциденту).
Как и на изображении выше, У меня есть два инцидента (A и B), и к этим инцидентам прикреплено несколько транспортных средств. Например; к инциденту А прикреплены транспортные средства X, Y, Z. к инциденту B прикреплены транспортные средства L, P.
Моя цель, когда я нажимаю на маркер A, мне нужно показать маршруты от X до A, Y до A и от Z до A. И когда я нажимаю на маркер B, он должен очистить все маршруты, нарисованные на карте ранее, и должен показать маршруты L к B и P к B. Ниже приведен мой код angularjs, пытающийся достичь вышеуказанного результата, но он не показывает все маршруты, а показывает только один маршрут, когда я нажимаю на определенный маркер.
var mapCenter = { lat: 40.819622, lng: -74.108587 };
//initialise the map
$scope.mymapdetail = new google.maps.Map(document.getElementById('googleMaps'), {
zoom: 12,
scaleControl: false,
streetViewControl: false,
mapTypeControl: false,
fullscreenControl: false,
center: mapCenter
});
//initialise the incident data.
$scope.initFireRescue = function () {
return service.getIncidentList(constants.incidentListUrl).then(
function success(data) {
$scope.incidentList = data.data.incidentList;
$scope.addMarkersIncidents($scope.incidentList);
}, function error(response) {
}
);
};
$scope.addMarkersIncidents = function (incidentList) {
var directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap($scope.mymapdetail);
for (var i = 0; i < incidentList.length; i++) {
//info window intialise
$scope.InfoWindow = new google.maps.InfoWindow();
//incident latitude and longitude
$scope.incidentLatLong = new google.maps.LatLng(parseFloat(incidentList[i].Position.Latitude), parseFloat(incidentList[i].Position.Longitude));
//marker icon logo
var markerIcon = {
url: incidentList[i].MarkerLogoUrl,
scaledSize: new google.maps.Size(40, 40)
};
//incident marker
var incidenetMarker = new google.maps.Marker({
position: $scope.incidentLatLong,
map: $scope.mymapdetail,
icon: markerIcon,
animation: google.maps.Animation.DROP,
title: incidentList[i].ID
});
// Adding InfoWindow to the Marker.
google.maps.event.addListener(incidenetMarker, "click", (function (incidenetMarker, i) {
return function () {
//set info window content
var tooltipHtml = $scope.setInfoWindowContentIncident(incidentList[i]);
//add the content to the info window
var elTooltip = $compile(tooltipHtml)($scope);
$scope.InfoWindow.setContent(elTooltip[0]);
//set the info window to the marker
$scope.InfoWindow.open($scope.mymapdetail, incidenetMarker);
//draw the route to the vehicle when clicked on the incident
for (var q = 0; q < incidentList[i].VehicleList.length; q++) {
directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true, map: $scope.mymapdetail });
var request = {
origin: new google.maps.LatLng(parseFloat(incidentList[i].VehicleList[q].Position.Latitude), parseFloat(incidentList[i].VehicleList[q].Position.Longitude)),
destination: new google.maps.LatLng(parseFloat(incidentList[i].Position.Latitude), parseFloat(incidentList[i].Position.Longitude)),
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert('not drawn');
}
});
}
};
})(incidenetMarker, i));
//vehicle mapping in google maps
for (var j = 0; j < incidentList[i].VehicleList.length; j++) {
//vehicle latitude and longitude
$scope.vehLatLong = new google.maps.LatLng(parseFloat(incidentList[i].VehicleList[j].Position.Latitude), parseFloat(incidentList[i].VehicleList[j].Position.Longitude));
//marker icon logo
var vehicleIcon = {
url: incidentList[i].VehicleList[j].MarkerUrl,
scaledSize: new google.maps.Size(60, 60)
};
//vehicle marker
var vehiMarker = new google.maps.Marker({
position: $scope.vehLatLong,
map: $scope.mymapdetail,
icon: vehicleIcon,
animation: google.maps.Animation.DROP,
title: incidentList[i].VehicleList[j].ID
});
}
}
};
Может кто-нибудь дать мне знать, как мне достичь вышеупомянутой цели, пожалуйста? Ваша помощь в этом очень ценится.
Спасибо.