Dostosowywanie znaczników

Wybierz platformę: Android iOS JavaScript

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:

  1. Style markerów według typu: określ obiekt MarkerOptions dla stylów markerów tego samego typu. Zmiany są następnie stosowane po utworzeniu każdego znacznika, zastępując opcje domyślne. Przykłady znajdziesz w sekcji Zmienianie stylu znaczników za pomocą funkcji MarkerOptions w tym przewodniku.

  2. Umieszczanie znaczników na podstawie danych: określ funkcję dostosowywania, aby umieszczać znaczniki na podstawie danych. Możesz nadawać styl na podstawie danych z funkcji Udostępnianie ścieżki lub ze źródeł zewnętrznych:

    • Dane z udostępniania podróży: udostępnianie podróży przekazuje dane znacznika do funkcji personalizacji, w tym typ obiektu, który reprezentuje 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 łączyć dane o udostępnianiu przejazdu z informacjami ze źródeł zewnętrznych w Fleet Engine i na ich podstawie stylizować znacznik.

    Przykłady znajdziesz w sekcji Zmienianie stylu znaczników za pomocą funkcji personalizacji tego przewodnika.

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

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, korzystając z dowolnego z dostosowań znacznika wymienionych w sekcji Opcje dostosowywania znacznika, postępuj zgodnie z tym wzorcem.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Zmienianie stylu znaczników za pomocą funkcji dostosowywania

Z przykładu poniżej dowiesz się, jak skonfigurować styl znaku drogowego 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.
      });
    }
  };

Co dalej?