Dostosuj wygląd i styl znaczników dodanych do mapy. Dostosuj wygląd i styl znaczników dodanych do mapy na dwa sposoby:
Znaczniki stylu oparte na typie: określ
MarkerOptions
. obiektu, aby dodać znaczniki stylu tego samego typu. Wskazane przez Ciebie zmiany to: a następnie stosowane po utworzeniu każdego znacznika, zastępując wszystkie opcje domyślne. Przykłady: Zmień styl znaczników za pomocą elementuMarkerOptions
w tej Google.Znaczniki stylu na podstawie danych: określ funkcję dostosowania, aby na podstawie danych. Możesz zmienić styl na podstawie danych z podróży udostępnianiem lub ze źródeł zewnętrznych:
Dane z udostępniania trasy: udostępnianie ścieżek przekazuje dane znaczników do funkcji dostosowywania, w tym typu obiektu reprezentowanego przez znacznik: pojazdem, punktem początkowym, punkcie pośrednim lub miejscu docelowym. Styl znacznika zostanie zmieniony zgodnie z bieżącym stanem elementu znacznika. Na przykład liczba punktów pośrednich pozostałych do zakończenia podróży.
Źródła zewnętrzne: dane o udostępnianiu ścieżki możesz łączyć z danych ze źródeł spoza Fleet Engine i na tej podstawie dostosować styl znacznika. informacje.
Przykłady: Zmienianie stylu znaczników za pomocą funkcji dostosowywania w tym przewodniku.
Dodaj obsługę kliknięć do znaczników: np.: Więcej informacji znajdziesz w sekcji Dodawanie obsługi kliknięć.
Opcje dostosowywania znaczników
Obie opcje korzystają z następujących parametrów dostosowywania w sekcji
Maps JavaScript API w
FleetEngineTripLocationProviderOptions
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
Zmień styl znaczników za pomocą atrybutu MarkerOptions
Ten przykład pokazuje, jak skonfigurować style znaczników pojazdu za pomocą
obiekt MarkerOptions
. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego
przy użyciu dowolnej z dostosowań znacznika wymienionych w
Opcje dostosowywania znacznika.
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Zmienianie stylu znaczników za pomocą funkcji dostosowywania
Ten przykład pokazuje, jak skonfigurować style znaczników pojazdu za pomocą funkcji dostosowywania. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego za pomocą dowolnego z parametrów dostosowania znacznika wymienionych w 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}`);
};
Dodaj obsługę kliknięć do znaczników
Poniższy 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ą dowolnego ze znaczników parametrów dostosowania wymienionych w opcjach dostosowania znacznika.
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.
});
}
};