Dostosuj znaczniki

Dzięki bibliotece JavaScript do śledzenia floty możesz dostosowywać wygląd i styl znaczników dodawanych do mapy. Aby to zrobić, musisz określić spersonalizowane znaczniki, które biblioteka śledzenia floty zastosuje przed dodaniem znaczników do mapy i przy każdej aktualizacji znacznika. Wygląd i styl znaczników możesz dostosować na te sposoby:

  1. Style markerów według typu: określ obiekt MarkerOptions dla stylów markerów tego samego typu. Wprowadzone zmiany zostaną jest stosowane po utworzeniu każdego znacznika, zastępując wszystkie opcje domyślne. Przykłady znajdziesz w sekcji Style markerów na podstawie typu w tym przewodniku.

  2. Stylizacja znaczników na podstawie danych: możesz określić funkcję personalizacji na podstawie danych, a także dodać interaktywność do znaczników, np. obsługę kliknięć. Możesz ustawić styl na podstawie danych z śledzenia floty lub ze źródeł zewnętrznych:

    • Dane z śledzenia floty: funkcja śledzenia floty przekazuje dane do funkcji personalizacji, w tym typ obiektu reprezentowany przez znacznik: pojazd, przystanek lub zadanie. Styl znacznika zostanie zmieniony zgodnie z bieżącym stanem elementu znacznika. Na przykład liczba o pozostałych przystankach lub typie zadania.

    • Zewnętrzne źródła: możesz łączyć dane śledzenia floty z informacjami ze źródeł zewnętrznych w Fleet Engine i na ich podstawie stylizować znacznik.

    Przykłady znajdziesz w artykule Style markerów 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. Używanie niestandardowych znaczników do śledzenia pojazdów doręczających zaplanowane zadania: możesz dostosowywać znaczniki do śledzenia pojazdów. Więcej informacji znajdziesz w artykule Używanie niestandardowych znaczników do śledzenia pojazdu dostawczego.

Opcje dostosowywania znaczników

Biblioteka śledzenia floty udostępnia te parametry dostosowywania:

Parametry dostosowania przejazdów na żądanie

Parametry dostosowywania zaplanowanych zadań

Znaczniki stylu na podstawie typu

Z przykładu poniżej dowiesz się, jak skonfigurować styl znacznika pojazdu za pomocą obiekt MarkerOptions. Aby dostosować styl dowolnego znacznika, postępuj zgodnie z tym wzorcem, korzystając z dowolnej opcji wymienionej w sekcji 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 stylów na podstawie danych,

Poniższy przykład pokazuje, jak skonfigurować styl znacznika pojazdu za pomocą funkcji dostosowywania. Aby dostosować styl dowolnego znacznika na podstawie danych, postępuj zgodnie z tym wzorcem, korzystając z dowolnej opcji wymienionej w sekcji Opcje dostosowywania znacznika.

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

Dodawanie obsługi kliknięć do znaczników

Ten 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 są wymienione 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 chcesz użyć setVisible, filtruj dowolne znaczniki, stosując ten wzór za pomocą dowolnej opcji wymienionej w sekcji Opcje dostosowywania znaczników.

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?