Biblioteka śledzenia floty w JavaScript umożliwia dostosowywanie wyglądu znaczników dodawanych do mapy. Aby to zrobić, określ dostosowania znaczników, które biblioteka śledzenia floty zastosuje przed dodaniem znaczników do mapy i przy każdej aktualizacji znacznika. Wygląd znaczników możesz dostosować na te sposoby:
Stylizuj markery na podstawie typu: określ obiekt
MarkerOptions, aby stylizować markery tego samego typu. Wprowadzone zmiany są stosowane po utworzeniu każdego znacznika, co powoduje zastąpienie opcji domyślnych. Przykłady znajdziesz w sekcji Stylizowanie znaczników na podstawie typu w tym przewodniku.Stylizowanie znaczników na podstawie danych: określ funkcję dostosowywania na podstawie danych, a także dodaj do znaczników interaktywność, np. obsługę kliknięć. Stylizację możesz dostosować na podstawie danych z śledzenia floty lub ze źródeł zewnętrznych:
Dane ze śledzenia floty: śledzenie floty przekazuje do funkcji dostosowywania dane, w tym typ obiektu, który reprezentuje znacznik: pojazd, przystanek lub zadanie. Styl znacznika zmieni się wtedy w zależności od jego bieżącego stanu. Może to być np. liczba pozostałych przystanków lub rodzaj zadania.
Źródła zewnętrzne: możesz połączyć dane śledzenia floty z danymi ze źródeł zewnętrznych w stosunku do Fleet Engine i dostosować styl znacznika na podstawie tych informacji.
Przykłady znajdziesz w artykule Stylizowanie markerów na podstawie danych.
Dodawanie obsługi kliknięć do znaczników: przykłady znajdziesz w sekcji Dodawanie obsługi kliknięć.
Filtrowanie widocznych znaczników: filtruj, które znaczniki mają się pojawiać, korzystając z funkcji filtrowania dostępnych w usłudze lokalizacyjnej JavaScript. Na przykład:
Używanie dostosowywania markerów do śledzenia pojazdu dostarczającego zaplanowane zadania: możesz dostosowywać markery, aby śledzić pojazdy. Więcej informacji znajdziesz w artykule Śledzenie pojazdu dostawczego za pomocą dostosowywania markerów.
Opcje dostosowywania znacznika
Biblioteka śledzenia floty udostępnia te parametry dostosowywania:
Parametry dostosowywania przejazdów na żądanie
Parametry dostosowywania zaplanowanych zadań
Stylizowanie znaczników na podstawie typu
Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą obiektu MarkerOptions. Aby dostosować styl dowolnego znacznika, użyj dowolnej z opcji wymienionych w sekcji Opcje dostosowywania znaczników.
Przykład przejazdów na żądanie
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Przykład zaplanowanych zadań
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Markery stylu na podstawie danych
W przykładzie poniżej pokazujemy, jak skonfigurować styl znacznika pojazdu za pomocą funkcji dostosowywania. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego znacznika na podstawie danych, korzystając z dowolnej z opcji wymienionych w sekcji Opcje dostosowywania znaczników powyżej.
Przykład przejazdów na żądanie
JavaScript
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
Przykład zaplanowanych zadań
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
Dodawanie obsługi kliknięć do znaczników
W przykładzie poniżej pokazujemy, jak dodać obsługę kliknięć do znacznika pojazdu. Postępuj zgodnie z tym wzorcem, aby dodać obsługę kliknięć do dowolnego znacznika za pomocą dowolnej z opcji wymienionych w sekcji Opcje dostosowywania znaczników powyżej.
Przykład przejazdów na żądanie
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Przykład zaplanowanych zadań
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Filtrowanie widocznych znaczników
Jeśli musisz użyć znaku setVisible, postępuj zgodnie z tym wzorcem, aby filtrować dowolne znaczniki za pomocą dowolnej z opcji wymienionych powyżej w sekcji Opcje dostosowywania znaczników.
Przykład przejazdów na żądanie
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
Przykład zaplanowanych zadań
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};