Dostosuj znaczniki

Za pomocą biblioteki śledzenia floty JavaScript możesz dostosować wygląd i sposób działania znaczników dodanych do mapy. W tym celu należy określić ustawienia znaczników, które biblioteka śledzenia floty stosuje przed dodaniem znaczników do mapy. i po każdej aktualizacji znacznika. Wygląd i styl znaczników możesz dostosować w w następujący sposób:

  1. Znaczniki stylu oparte na typie: określ MarkerOptions. obiektu, aby dodać znaczniki stylu tego samego typu. Wprowadzone zmiany zostaną jest stosowane po utworzeniu każdego znacznika, zastępując wszystkie opcje domyślne. Dla: przykład: zobacz Znaczniki stylu oparte na typie w w tym przewodniku.

  2. Znaczniki stylu na podstawie danych: określ funkcję dostosowania na podstawie oraz dodanie interaktywności do znaczników, np. obsługi kliknięć. Styl możesz określić na podstawie danych ze śledzenia floty lub ze źródeł zewnętrznych:

    • Dane ze śledzenia floty: śledzenie floty przekazuje dane do funkcji dostosowywania, w tym typu obiektu wskazywanego przez znacznik reprezentuje: pojazd, zatrzymanie lub zadanie. Styl znacznika zostanie zmieniony zgodnie z bieżącym stanem elementu znacznika. Na przykład liczba o pozostałych przystankach lub typie zadania.

    • Źródła zewnętrzne: możesz połączyć dane śledzenia floty z danymi z poza Fleet Engine i określić na ich podstawie styl informacje.

    Przykłady znajdziesz w sekcji Znaczniki stylu na podstawie danych.

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

  4. Filtruj widoczne znaczniki: określa, które znaczniki są widoczne. z możliwościami filtrowania dostępnymi w lokalizacji JavaScript dostawcy usług. Na przykład:

    .
  5. Aby śledzić pojazd, który jest dostarczany do zaplanowanych zadań, skorzystaj z dostosowania znacznika: Możesz dostosować znaczniki, aby śledzić pojazdy. Więcej informacji znajdziesz w sekcji Korzystanie dostosowania znacznika, aby śledzić pojazd dostawczy.

Opcje dostosowywania znaczników

Biblioteka śledzenia floty udostępnia te parametry dostosowania:

Parametry dostosowania podróży na żądanie

Parametry dostosowania zaplanowanych zadań

Znaczniki stylu na podstawie typu

Ten przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą obiekt MarkerOptions. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego przy użyciu dowolnej z opcji wymienionych w Opcje dostosowywania znacznika.

Przykład podróży na żądanie

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Przykład zaplanowanych zadań

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Znaczniki stylu na podstawie danych

Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą funkcji dostosowywania. Postępuj zgodnie z tym wzorcem, aby dostosować styl dowolnego na podstawie danych z użyciem dowolnej z opcji Opcje dostosowania znacznika wymienione powyżej.

Przykład podróży na żądanie

JavaScript

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Przykład zaplanowanych zadań

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

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ą dowolnej z opcje personalizacji wymienionej w sekcji Opcje dostosowania znacznika powyżej.

Przykład podróży na żądanie

JavaScript

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

TypeScript

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

Przykład zaplanowanych zadań

JavaScript

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

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

Filtruj widoczne znaczniki

Jeśli musisz użyć atrybutu setVisible, postępuj zgodnie z tym wzorcem, aby filtrować wszystkie znaczniki korzystając z dowolnej z opcji wymienionych w sekcji Opcje dostosowania znacznika powyżej.

Przykład podróży na żądanie

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Przykład zaplanowanych zadań

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Co dalej?