Dostosowywanie znaczników

Wybierz platformę: Android iOS JavaScript

Dostosuj wygląd i styl znaczników dodanych do mapy. Możesz to zrobić na 2 sposoby:

1. Stylizuj znaczniki na podstawie typu: określ obiekt MarkerOptions , aby stylizować znaczniki tego samego typu. Wprowadzone zmiany są stosowane po utworzeniu każdego znacznika, co powoduje zastąpienie opcji domyślnych. Przykłady znajdziesz w sekcji Zmienianie stylu znaczników za pomocą MarkerOptions w tym przewodniku.

2. Stylizuj znaczniki na podstawie danych: określ funkcję dostosowywania, aby stylizować znaczniki na podstawie danych. Możesz stylizować na podstawie danych z udostępniania podróży lub ze źródeł zewnętrznych:

   • Dane z udostępniania podróży: udostępnianie podróży przekazuje do funkcji dostosowywania dane znacznika, w tym typ obiektu, który reprezentuje znacznik: pojazd, miejsce rozpoczęcia, punkt pośredni lub miejsce docelowe. Styl znacznika zmienia się wtedy w zależności od bieżącego stanu elementu znacznika. Na przykład liczba punktów pośrednich pozostałych do końca podróży pojazdu.

   • Źródła zewnętrzne: możesz połączyć dane z udostępniania podróży z danymi ze źródeł spoza Fleet Engine i stylizować znacznik również na podstawie tych informacji.

   Przykłady znajdziesz w sekcji Zmienianie stylu znaczników za pomocą funkcji dostosowywania w tym przewodniku.

3. Dodaj obsługę kliknięć do znaczników: przykłady, znajdziesz w sekcji Dodawanie obsługi kliknięć.

Opcje dostosowywania znaczników

Obie opcje używają tych parametrów dostosowywania w interfejsie Google Maps JavaScript API w sekcji FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Zmienianie stylu znaczników za pomocą MarkerOptions

Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą obiektu MarkerOptions. Aby dostosować styl dowolnego znacznika za pomocą dowolnego z parametrów dostosowywania wymienionych w sekcji Opcje dostosowywania znaczników, postępuj zgodnie z tym wzorcem.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Zmienianie stylu znaczników za pomocą funkcji dostosowywania

Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą funkcji dostosowywania. Aby dostosować styl dowolnego znacznika za pomocą dowolnego z parametrów dostosowywania wymienionych w Opcje dostosowywania znaczników, postępuj zgodnie z tym wzorcem.

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

Poniższy przykład pokazuje, jak dodać obsługę kliknięć do znacznika pojazdu. Aby dodać obsługę kliknięć do dowolnego znacznika za pomocą dowolnego z parametrów dostosowywania znacznika wymienionych w sekcji Opcje dostosowywania znaczników, 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.
      });
    }
  };

Co dalej?

• Dostosowywanie polilinii trasy