Dostosowywanie wyglądu i stylu znaczników dodanych do mapy. Wygląd i styl znaczników dodanych do mapy możesz dostosować na 2 sposoby:
Style markerów według typu: określ obiekt
MarkerOptions
dla stylów markerów tego samego typu. Wprowadzone zmiany są następnie stosowane po utworzeniu każdego znacznika, zastępując wszelkie domyślne opcje. Przykłady znajdziesz w sekcji Zmienianie stylu znaczników za pomocą funkcjiMarkerOptions
w tym przewodniku.Umieszczanie znaczników na podstawie danych: określ funkcję dostosowywania, aby umieszczać znaczniki na podstawie danych. Styl możesz określić na podstawie danych z udostępniania podróży lub źródeł zewnętrznych:
Dane z udostępniania podróży: udostępnianie podróży przekazuje dane znacznika do funkcji personalizacji, w tym typ obiektu reprezentowanego przez znacznik: pojazd, punkt początkowy, punkt pośredni lub miejsce docelowe. Styl znacznika zmienia się w zależności od bieżącego stanu elementu znacznika. Może to być na przykład liczba punktów pośrednich, które pozostały do zakończenia podróży.
Źródła zewnętrzne: możesz połączyć dane o udostępnianiu podróży z danymi ze źródeł spoza Fleet Engine i na podstawie tych informacji określić styl znacznika.
Przykłady znajdziesz w sekcji Zmienianie stylu znaczników za pomocą funkcji personalizacji tego przewodnika.
Dodaj obsługę kliknięć do znaczników: przykłady znajdziesz w sekcji Dodaj obsługę kliknięć.
Opcje dostosowywania znaczników
Obie opcje korzystają z tych parametrów dostosowywania w interfejsie Maps JavaScript API firmy Google: FleetEngineTripLocationProviderOptions
.
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
Zmień styl znaczników za pomocą MarkerOptions
Ten przykład pokazuje, jak skonfigurować styl znaku drogowego pojazdu za pomocą obiektu MarkerOptions
. Aby dostosować styl dowolnego znacznika, postępuj zgodnie z tym wzorcem, korzystając z dowolnego z dostosowań znacznika wymienionych w sekcji Opcje dostosowywania znacznika.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Zmienianie stylu znaczników za pomocą funkcji dostosowywania
Z tego przykładu dowiesz się, jak skonfigurować styl znaczników pojazdu za pomocą funkcji dostosowywania. Aby dostosować styl dowolnego znacznika, postępuj zgodnie z tym wzorcem, używając dowolnego parametru dostosowywania znacznika wymienionego w sekcji Opcje dostosowywania znacznika.
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
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 za pomocą dowolnego parametru dostosowania znacznika wymienionego w sekcji Opcje dostosowania znacznika, postępuj zgodnie z tym wzorcem.
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};