Za pomocą biblioteki śledzenia floty JavaScript możesz dostosować wygląd i sposób działania znaczników dodanych do mapy. Aby to zrobić, musisz określić spersonalizowane znaczniki, które biblioteka śledzenia floty zastosuje przed dodaniem znaczników do mapy i przy każdej aktualizacji znacznika. Wygląd i styl znaczników możesz dostosować w w następujący sposób:
Style markerów według typu: określ obiekt
MarkerOptionsdla stylów markerów tego samego typu. Wprowadzone zmiany zostaną jest stosowane po utworzeniu każdego znacznika, zastępując wszystkie opcje domyślne. Przykłady znajdziesz w sekcji Style markerów na podstawie typu w tym przewodniku.Stylizacja znaczników na podstawie danych: możesz określić funkcję personalizacji na podstawie danych, a także dodać interaktywność do znaczników, np. obsługę kliknięć. Możesz ustawić styl na podstawie danych z śledzenia floty lub ze źródeł zewnętrznych:
Dane ze śledzenia floty: śledzenie floty przekazuje dane do funkcji dostosowywania, w tym typu obiektu wskazywanego przez znacznik reprezentuje: pojazd, zatrzymanie lub zadanie. Styl znacznika zostanie zmieniony zgodnie z bieżącym stanem elementu znacznika. Na przykład liczba o pozostałych przystankach lub typie zadania.
Źródła zewnętrzne: możesz połączyć dane śledzenia floty z danymi z poza Fleet Engine i określić na ich podstawie styl informacje.
Przykłady znajdziesz w sekcji Znaczniki stylu na podstawie danych.
Dodaj obsługę kliknięć do znaczników: przykłady znajdziesz w sekcji Dodaj obsługę kliknięć.
Filtruj widoczne znaczniki: określa, które znaczniki są widoczne. z możliwościami filtrowania dostępnymi w lokalizacji JavaScript dostawcy usług. Na przykład:
.Aby śledzić pojazd, który jest dostarczany do zaplanowanych zadań, skorzystaj z dostosowania znacznika: Możesz dostosować znaczniki, aby śledzić pojazdy. Więcej informacji znajdziesz w sekcji Korzystanie dostosowania znacznika, aby śledzić pojazd dostawczy.
Opcje dostosowywania znaczników
Biblioteka śledzenia floty udostępnia te parametry dostosowania:
Parametry dostosowania przejazdów na żądanie
Parametry dostosowywania zaplanowanych zadań
Stylizowanie znaczników na podstawie typu
Poniższy przykład pokazuje, jak skonfigurować styl znaku pojazdu za pomocą obiektu MarkerOptions. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego
przy użyciu dowolnej z opcji wymienionych w
Opcje dostosowywania znacznika.
Przykład podróży na żądanie
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Przykład zaplanowanych zadań
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Znaczniki stylu na podstawie danych
Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą funkcji dostosowywania. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego na podstawie danych z użyciem dowolnej z opcji Opcje dostosowania znacznika wymienione powyżej.
Przykład podróży 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. Postępuj zgodnie z tym wzorcem, aby dodać obsługę kliknięć do dowolnego znacznika za pomocą dowolnej z są wymienione w sekcji Opcje dostosowania znacznika powyżej.
Przykład podróży 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.
});
}
};
Filtruj widoczne znaczniki
Jeśli musisz użyć atrybutu setVisible, postępuj zgodnie z tym wzorcem, aby filtrować wszystkie znaczniki
korzystając z dowolnej z opcji wymienionych w sekcji Opcje dostosowania znacznika 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);
}
};