Dostosowywanie znaczników

Dostosuj wygląd i styl znaczników dodanych do mapy. Dostosuj wygląd i styl znaczników dodanych do mapy na dwa sposoby:

1. 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ą elementu MarkerOptions w tej Google.

2. 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.

3. 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.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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.

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

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.

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

Co dalej?

• Dostosowywanie linii łamanych trasy