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:
Style markerów według typu: określ obiekt
MarkerOptionsdla stylów markeró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.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 z śledzenia floty: funkcja śledzenia floty przekazuje dane do funkcji personalizacji, w tym typ obiektu reprezentowany przez znacznik: pojazd, przystanek lub zadanie. Styl znacznika zmienia się w zależności od bieżącego stanu elementu znacznika. Może to być na przykład liczba pozostałych przystanków lub typ zadania.
Źródła zewnętrzne: możesz łączyć dane śledzenia floty z informacjami ze źródeł zewnętrznych, a także stylizować znacznik na podstawie tych danych.
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: filtruj widoczność znaczników za pomocą funkcji filtrowania dostępnych w usługodawcy lokalizacji JavaScript. 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 Używanie niestandardowych znaczników do śledzenia pojazdu dostawczego.
Opcje dostosowywania znaczników
Biblioteka śledzenia floty udostępnia te parametry dostosowywania:
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. Aby dostosować styl dowolnego znacznika, 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 = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Przykład zaplanowanych zadań
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
znaczniki stylów 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}`);
};
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, korzystając z dowolnej opcji wymienionej w sekcji Opcje dostosowywania znacznika, postępuj zgodnie z tym wzorcem.
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 widoczności 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);
}
};