Ten dokument wyjaśnia, jak dostosować wygląd i styl tras na monitorowanych trasach
pojazdów na mapie. Trasy są rysowane na mapie w postaci linii łamanych. Dla każdej pary
na aktywnej lub pozostałej ścieżce pojazdu, biblioteka tworzy
google.maps.Polyline
.
Możesz stylizować obiekty Polyline
, określając dostosowania linii łamanej, które
biblioteka ma zastosowanie w dwóch sytuacjach:
- Przed dodaniem obiektów do mapy
- Gdy dane używane na potrzeby obiektów zmienią się
Określanie stylu linii łamanych
Podobnie jak w przypadku dostosowywania znaczników, możesz również dostosować styl linii łamanych trasy różne sposoby:
Określ styl linii łamanych trasy według typu: użyj
PolylineOptions
. zostanie zastosowana do wszystkich pasujących obiektówPolyline
, gdy są utworzonych lub zaktualizowanych. Przykład znajdziesz w sekcji Stylizowanie linii łamanych według typu.Stylizowanie linii łamanych trasy na podstawie danych: określ funkcję dostosowywania. na podstawie danych ze śledzenia floty lub ze źródeł zewnętrznych:
Dane ze śledzenia floty: śledzenie floty przekazuje dane linii łamanych do funkcja dostosowywania, w tym dane dotyczące bieżącego pojazdu. stanu. Na podstawie tych danych można określić styl linii łamanych, w tym kolorować obiekt
Polyline
staje się głębszy odcień lub pojazd porusza się wolniej.Źródła zewnętrzne: możesz połączyć dane śledzenia floty z danymi z spoza Fleet Engine i określić na podstawie tego stylu styl obiektu
Polyline
i informacjami o nich.
Przykład znajdziesz w sekcji Stylizowanie linii łamanych na podstawie danych.
Kontroluj widoczność linii łamanych trasy: możesz ukryć lub pokazać linii łamanych za pomocą właściwości
visible
. Więcej informacji: W tym przewodniku możesz zarządzać widocznością linii łamanych.Wyświetlanie dodatkowych informacji dotyczących pojazdu lub znacznika lokalizacji: Dodatkowe informacje możesz przedstawić za pomocą właściwości
infowindow
. Dla: szczegóły, patrz Wyświetlanie dodatkowych informacji o pojazdach lub znacznikach lokalizacji w w tym przewodniku.
Opcje dostosowywania linii łamanej
Poniższe opcje dostosowywania są dostępne w obu
FleetEngineVehicleLocationProviderOptions
oraz
FleetEngineDeliveryVehicleLocationProviderOptions
Możesz ustawić dostosowania dla różnych stanów trasy w pojeździe
ścieżka:
Już przebyta ścieżka: użyj
takenPolylineCustomization
– Podróże na żądanie, informacje o zaplanowanych zadaniach.Aktywnie podróżująca ścieżka: użyj
activePolylineCustomization
– Podróże na żądanie, informacje o zaplanowanych zadaniach.Jeszcze nieprzebyta ścieżka: użyj
remainingPolylineCustomization
– Podróże na żądanie, informacje o zaplanowanych zadaniach.
Nadaj styl linii łamanych trasy według typu
Aby stylizować linie łamane trasy według typu, zmień styl obiektów Polyline
za pomocą: PolylineOptions
.
Poniższy przykład pokazuje, jak skonfigurować styl obiektu Polyline
.
dzięki PolylineOptions
. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego
Polyline
obiekt używający dowolnych dostosowań linii łamanych trasy wymienionych w
Opcje dostosowywania linii łamanej w tym przewodniku.
Przykład podróży na żądanie lub zaplanowanych zadań
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Zmienianie stylu linii łamanych trasy na podstawie danych
Aby określić styl linii łamanych trasy z użyciem danych, zmień styl obiektów Polyline
za pomocą funkcji dostosowywania.
Poniższy przykład pokazuje, jak skonfigurować styl aktywnej trasy.
za pomocą funkcji dostosowywania. Postępuj zgodnie z tym wzorcem, aby dostosować styl elementu
dowolny obiekt Polyline
korzystający z wymienionych parametrów dostosowania linii łamanej
w opcjach dostosowania linii łamanej w tym przewodniku.
Przykład podróży 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 stylu uwzględniającego natężenie ruchu (tylko podróże na żądanie)
Fleet Engine zwraca dane o szybkości ruchu dla aktywnych i pozostałych ścieżek dla
poniższy pojazd. Za pomocą tych informacji możesz określić styl produktu Polyline
według prędkości ruchu w obiektach:
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'});
}
}
};
Kontrolowanie widoczności linii łamanych
Domyślnie widoczne są wszystkie obiekty Polyline
. Tworzenie obiektu Polyline
niewidoczny, ustaw właściwość visible
na false
.
Przykład podróży na żądanie lub zaplanowanych zadań
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Wyświetlanie okna informacyjnego z pojazdem lub znacznikiem lokalizacji
InfoWindow
pozwala wyświetlić dodatkowe informacje na temat:
pojazdu lub lokalizacji.
Z przykładu poniżej dowiesz się, jak utworzyć obiekt InfoWindow
i dołączyć go do
znacznik pojazdu.
Przykład podróży 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();