Z tego dokumentu dowiesz się, jak dostosowywać wygląd i wygląd tras pojazdów śledzonych na mapie. Trasy są nanoszone na mapie w postaci linii złożonych. Dla każdej pary współrzędnych na aktywnej lub pozostałej ścieżce pojazdu biblioteka tworzy obiekt google.maps.Polyline
.
Styl obiektów Polyline
możesz określić, podając niestandardowe linie wielokątne, które biblioteka zastosuje w 2 sytuacjach:
- Przed dodaniem obiektów do mapy
- gdy dane używane w przypadku obiektów uległy zmianie;
Nadawanie stylów liniom łamanym
Podobnie jak w przypadku markerów, możesz zmieniać styl odcinków ścieżki na różne sposoby:
Stylizacja odcinków trasy według typu: użyj opcji
PolylineOptions
, aby zastosować ją do wszystkich obiektówPolyline
, które pasują do siebie podczas tworzenia lub aktualizowania. Przykład znajdziesz w sekcji Nadawanie stylu poligonom według typu.Stylizacja odcinków trasy na podstawie danych: określ funkcję dostosowywania na podstawie danych z lokalizacji floty lub ze źródeł zewnętrznych:
Dane z śledzenia floty: śledzenie floty przekazuje funkcji personalizacji dane dotyczące ścieżki, w tym dane o bieżącym stanie pojazdu. Na podstawie tych danych możesz nadać styl poligonom, np. nadać obiektowi
Polyline
ciemniejszy odcień lub pogrubić go, gdy pojazd porusza się wolniej.Źródła zewnętrzne: możesz łączyć dane śledzenia floty z informacjami z źródeł zewnętrznych w Fleet Engine i na podstawie tych informacji stylizować obiekt
Polyline
.
Przykład znajdziesz w artykule Nadawanie stylu liniom wielokątnym na podstawie danych.
Sterowanie widocznością odcinków trasy: odcinki trasy możesz ukrywać lub wyświetlać za pomocą właściwości
visible
. Więcej informacji znajdziesz w sekcji Zarządzanie widocznością ścieżek poliliniowych w tym przewodniku.Wyświetlanie dodatkowych informacji o pojazdach lub znacznikach lokalizacji: możesz wyświetlać dodatkowe informacje za pomocą właściwości
infowindow
. Więcej informacji znajdziesz w sekcji Wyświetlanie dodatkowych informacji o pojazdach lub znacznikach lokalizacji w tym przewodniku.
Opcje dostosowywania linii złożonej
Te opcje dostosowywania są dostępne w wersjach FleetEngineVehicleLocationProviderOptions
i FleetEngineDeliveryVehicleLocationProviderOptions
.
Możesz ustawić opcje dostosowywania dla różnych stanów ścieżki w trasie pojazdu:
Już przebyta trasa: użyj
takenPolylineCustomization
– Podróże na żądanie, Zaplanowane zadania.Aktywna ścieżka podróży: użyj
activePolylineCustomization
– Podróże na żądanie, Zaplanowane zadania.Trasa, którą jeszcze nie przebyliśmy: użyj
remainingPolylineCustomization
– Podróże na żądanie, Zaplanowane zadania.
Nadawanie stylów liniom łamanym tras według typu
Aby stylizować polilinie tras według typu, zmień styl obiektów Polyline
za pomocą PolylineOptions
.
Ten przykład pokazuje, jak skonfigurować styl obiektu Polyline
z PolylineOptions
. Aby dostosować styl obiektu Polyline
, postępuj zgodnie z tym wzorcem, korzystając z dowolnej opcji dostosowywania wielokąta trasy wymienionej w sekcji Opcje dostosowywania wielokąta w tym przewodniku.
Przykład dotyczący przejazdów na żądanie lub zaplanowanych zadań
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Nadawanie stylu liniom ścieżki za pomocą danych
Aby stylizować linie ścieżki za pomocą danych, zmień styl obiektów Polyline
za pomocą funkcji dostosowywania.
Ten przykład pokazuje, jak skonfigurować styl aktywnej trasy za pomocą funkcji dostosowania. Aby dostosować styl dowolnego obiektu Polyline
, postępuj zgodnie z tym wzorcem, używając dowolnego parametru dostosowywania wielokąta wymienionego w sekcji Opcje dostosowywania wielokąta w tym przewodniku.
Przykład przejazdów na żądanie
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Przykład zaplanowanych zadań
JavaScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
const distance = params.deliveryVehicle.remainingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Przykład stylizacji uwzględniającej natężenie ruchu (tylko w przypadku przejazdów na żądanie)
Fleet Engine zwraca dane o prędkości ruchu na bieżącej i pozostałych ścieżkach pojazdu, którego ruch jest śledzony. Możesz wykorzystać te informacje do stylizacji Polyline
obiektów zgodnie z prędkością ruchu:
JavaScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
TypeScript
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Zarządzanie widocznością ścieżek złożonych
Domyślnie wszystkie obiekty Polyline
są widoczne. Aby obiekt Polyline
był niewidoczny, ustaw właściwość visible
na false
.
Przykład dotyczący przejazdów na żądanie lub zaplanowanych zadań
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Wyświetlanie okna informacyjnego dla pojazdu lub znacznika lokalizacji
Możesz użyć InfoWindow
, aby wyświetlić dodatkowe informacje o pojazdach lub znacznikach lokalizacji.
Ten przykład pokazuje, jak utworzyć InfoWindow
i dołączyć go do znacznika pojazdu.
Przykład przejazdów na żądanie
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
Przykład zaplanowanych zadań
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
if (e.deliveryVehicle) {
const distance =
e.deliveryVehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next task.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
}
});
// 3. Close the info window.
infoWindow.close();