Dostosowywanie znaczników

Dostosuj wygląd i styl znaczników dodanych do mapy. Wygląd i styl znaczników dodanych do mapy możesz dostosować na 2 sposoby:

1. Stylizuj markery na podstawie typu: określ obiekt MarkerOptions do stylizowania markerów tego samego typu. Określone przez Ciebie zmiany są następnie stosowane po utworzeniu każdego znacznika, co powoduje zastąpienie wszelkich opcji domyślnych. Przykłady znajdziesz w tym przewodniku w sekcji Zmiana stylu znaczników za pomocą MarkerOptions.

2. Stylizowanie znaczników na podstawie danych: określ funkcję dostosowywania, aby stylizować znaczniki na podstawie danych. Możesz stosować style na podstawie danych z usługi wspólnych przejazdów lub ze źródeł zewnętrznych:

   • Dane z udostępniania podróży: udostępnianie podróży przekazuje do funkcji dostosowywania dane o znacznikach, w tym typ obiektu, który reprezentuje znacznik: pojazd, miejsce początkowe, punkt pośredni lub miejsce docelowe. Styl znacznika zmieni się wtedy w zależności od jego bieżącego stanu. Może to być na przykład liczba punktów pośrednich pozostałych do zakończenia podróży przez pojazd.

   • Źródła zewnętrzne: możesz połączyć dane o wspólnych przejazdach z danymi ze źródeł zewnętrznych w stosunku do Fleet Engine i na podstawie tych informacji określić styl znacznika.

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

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

Opcje dostosowywania znacznika

Obie opcje korzystają z tych parametrów dostosowywania w interfejsie Maps JavaScript API firmy Google w sekcji FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Zmienianie stylu znaczników za pomocą elementu MarkerOptions

Poniższy przykład pokazuje, jak skonfigurować stylizację znacznika pojazdu za pomocą obiektu MarkerOptions. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego znacznika za pomocą dowolnych opcji dostosowywania wymienionych w sekcji Opcje dostosowywania znacznika.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Zmienianie stylu znaczników za pomocą funkcji dostosowywania

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

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}`);
};

Dodawanie obsługi 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 z parametrów dostosowywania znacznika wymienionych w sekcji Opcje dostosowywania 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 polilinii trasy