Biblioteka JavaScript do śledzenia floty 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:
Stylizowanie znaczników na podstawie typu: określ obiekt
MarkerOptions, aby stylizować znaczniki tego samego typu. Wprowadzone zmiany zostaną zastosowane po utworzeniu każdego znacznika, zastępując wszystkie opcje domyślne. 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 interaktywność do znaczników, np. obsługę kliknięć. Możesz stylizować na podstawie danych ze ś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. Stylizacja znacznika zmienia się wtedy w zależności od bieżącego stanu elementu znacznika. Na przykład liczba pozostałych przystanków lub typ zadania.
Źródła zewnętrzne: możesz połączyć dane ze śledzenia floty z danymi ze źródeł spoza Fleet Engine i stylizować znacznik również na podstawie tych informacji.
Przykłady znajdziesz w sekcji Stylizowanie znacznikó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ę wyświetlać korzystając z funkcji filtrowania dostępnych w dostawcy lokalizacji JavaScript. Na przykład:
Śledzenie pojazdu realizującego zaplanowane zadania za pomocą dostosowywania znaczników: Możesz dostosować znaczniki, aby śledzić pojazdy. Więcej informacji znajdziesz w artykule Śledzenie pojazdu realizującego dostawę za pomocą dostosowywania znaczników.
Opcje dostosowywania znaczników
Biblioteka śledzenia floty udostępnia te parametry dostosowywania:
Parametry dostosowywania przejazdów na żądanie
Parametry dostosowywania zaplanowanych zadań
Stylizowanie znaczników na podstawie typu
Ten przykład pokazuje, jak skonfigurować stylizację znacznika pojazdu za pomocą obiektu MarkerOptions. Aby dostosować stylizację dowolnego
znacznika, postępuj zgodnie z tym wzorcem, używając 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'
};
Stylizowanie znaczników na podstawie danych
Ten przykład pokazuje, jak skonfigurować stylizację znacznika pojazdu za pomocą funkcji dostosowywania. Aby dostosować stylizację dowolnego znacznika na podstawie danych, postępuj zgodnie z tym wzorcem, używając dowolnej z opcji wymienionych w Opcje dostosowywania znaczników wymienionych 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
Ten przykład pokazuje, jak dodać obsługę kliknięć do znacznika pojazdu. Aby dodać obsługę kliknięć do dowolnego znacznika, postępuj zgodnie z tym wzorcem, używając dowolnej z opcji wymienionych w sekcji Opcje dostosowywania znaczników.
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ć metody setVisible, postępuj zgodnie z tym wzorcem, aby filtrować dowolne znaczniki
za pomocą dowolnej z opcji wymienionych w sekcji Opcje dostosowywania znaczników powyżej.
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);
}
};