Dzięki bibliotece JavaScript do śledzenia floty możesz dostosowywać wygląd i styl znaczników dodawanych do mapy. Aby to zrobić, określ 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ć na te sposoby:
Znaczniki stylu na podstawie typu: określ obiekt
MarkerOptions, aby określić styl znaczników tego samego typu. Następnie zmiany te są stosowane po utworzeniu każdego znacznika, zastępując wszelkie domyślne opcje. Przykłady znajdziesz w sekcji Style markerów na podstawie typu w tym przewodniku.Znaczniki stylu na podstawie danych: określ funkcję dostosowywania na podstawie danych, a także dodaj do znaczników elementy interaktywne, np. obsługę kliknięć. Styl możesz określić na podstawie danych ze śledzenia floty lub ze źródeł zewnętrznych:
Dane z śledzenia floty: funkcja śledzenia floty przekazuje dane do funkcji personalizacji, w tym typ obiektu reprezentowany przez znacznik: pojazd, przystanek lub zadanie. Styl znacznika zmieni się 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 śledzenia floty z danymi ze źródeł spoza Fleet Engine i na podstawie tych informacji określić styl znacznika.
Przykłady znajdziesz w artykule Style markerów na podstawie danych.
Dodaj obsługę kliknięć do znaczników: przykłady znajdziesz w sekcji Dodaj obsługę kliknięć.
Filtrowanie widoczności znaczników: za pomocą funkcji filtrowania dostępnych w usługach lokalizacyjnych JavaScripta możesz filtrować widoczność znaczników. Na przykład:
Używanie niestandardowych znaczników do śledzenia pojazdów doręczających zaplanowane zadania: możesz dostosowywać znaczniki do śledzenia pojazdów. Więcej informacji znajdziesz w artykule Śledzenie pojazdu dostawy za pomocą dostosowania znacznika.
Opcje dostosowywania znaczników
Biblioteka śledzenia floty udostępnia te parametry dostosowywania:
Parametry dostosowania podróży na żądanie
Parametry dostosowania zaplanowanych zadań
Stylizowanie znaczników na podstawie typu
Poniższy przykład pokazuje, jak skonfigurować styl znaku pojazdu za pomocą obiektu MarkerOptions. Aby dostosować styl dowolnego znacznika, postępuj zgodnie z tym wzorcem, korzystając z dowolnej opcji wymienionej w sekcji 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
Ten przykład pokazuje, jak skonfigurować styl markera pojazdu za pomocą funkcji personalizacji. Aby dostosować styl dowolnego znacznika na podstawie danych, postępuj zgodnie z tym wzorcem, korzystając z dowolnej opcji wymienionej w sekcji Opcje dostosowywania znacznika.
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}`);
};
Dodaj obsługę kliknięć do znaczników
Ten przykład pokazuje, jak dodać obsługę kliknięć do znacznika pojazdu. Aby dodać obsługę kliknięć do dowolnego znacznika, korzystając z dowolnej opcji wymienionej w sekcji Opcje dostosowywania znacznika, postępuj zgodnie z tym wzorcem.
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.
});
}
};
Filtrowanie widocznych znaczników
Jeśli chcesz użyć setVisible, filtruj dowolne znaczniki, stosując ten wzór za pomocą dowolnej opcji wymienionej 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);
}
};