Dostosuj znaczniki

Biblioteka JavaScript do śledzenia floty umożliwia dostosowywanie wyglądu znaczników dodawanych do mapy. Aby to zrobić, określ dostosowania znaczników, które biblioteka śledzenia floty zastosuje przed dodaniem znaczników do mapy i przy każdej aktualizacji znacznika. Wygląd znaczników możesz dostosować na te sposoby:

1. Stylizowanie znaczników na podstawie typu: określ obiekt MarkerOptions , aby stylizować znaczniki tego samego typu. Wprowadzone zmiany zostaną zastosowane po utworzeniu każdego znacznika, zastępując wszystkie opcje domyślne. Przykłady znajdziesz w sekcji Stylizowanie znaczników na podstawie typu w tym przewodniku.

2. Stylizowanie znaczników na podstawie danych: określ funkcję dostosowywania na podstawie danych, a także dodaj interaktywność do znaczników, np. obsługę kliknięć. Możesz stylizować na podstawie danych ze śledzenia floty lub ze źródeł zewnętrznych:

   • Dane ze śledzenia floty: śledzenie floty przekazuje do funkcji dostosowywania dane, w tym typ obiektu, który reprezentuje znacznik: pojazd, przystanek lub zadanie. Stylizacja znacznika zmienia się wtedy w zależności od bieżącego stanu elementu znacznika. Na przykład liczba pozostałych przystanków lub typ zadania.

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

   Przykłady znajdziesz w sekcji Stylizowanie znaczników na podstawie danych.

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

4. Filtrowanie widocznych znaczników: filtruj, które znaczniki mają się wyświetlać korzystając z funkcji filtrowania dostępnych w dostawcy lokalizacji JavaScript. Na przykład:

   • FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter
   • FleetEngineFleetLocationProvider.vehicleFilter

5. Śledzenie pojazdu realizującego zaplanowane zadania za pomocą dostosowywania znaczników: Możesz dostosować znaczniki, aby śledzić pojazdy. Więcej informacji znajdziesz w artykule Śledzenie pojazdu realizującego dostawę za pomocą dostosowywania znaczników.

Opcje dostosowywania znaczników

Biblioteka śledzenia floty udostępnia te parametry dostosowywania:

Parametry dostosowywania przejazdów na żądanie

• FleetEngineVehicleLocationProviderOptions
  • vehicleMarkerCustomization
  • originMarkerCustomization
  • destinationMarkerCustomization
  • intermediateDestinationMarkerCustomization
• FleetEngineFleetLocationProviderOptions
  • vehicleMarkerCustomization

Parametry dostosowywania zaplanowanych zadań

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

Stylizowanie znaczników na podstawie typu

Ten przykład pokazuje, jak skonfigurować stylizację znacznika pojazdu za pomocą obiektu MarkerOptions. Aby dostosować stylizację dowolnego znacznika, postępuj zgodnie z tym wzorcem, używając dowolnej z opcji wymienionych w sekcji Opcje dostosowywania znaczników.

Przykład przejazdów na żądanie

vehicleMarkerCustomization = {
  cursor: 'grab'
};

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Przykład zaplanowanych zadań

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Stylizowanie znaczników na podstawie danych

Ten przykład pokazuje, jak skonfigurować stylizację znacznika pojazdu za pomocą funkcji dostosowywania. Aby dostosować stylizację dowolnego znacznika na podstawie danych, postępuj zgodnie z tym wzorcem, używając dowolnej z opcji wymienionych w Opcje dostosowywania znaczników wymienionych powyżej.

Przykład przejazdów na żądanie

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

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

Przykład zaplanowanych zadań

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

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. Aby dodać obsługę kliknięć do dowolnego znacznika, postępuj zgodnie z tym wzorcem, używając dowolnej z opcji wymienionych w sekcji Opcje dostosowywania znaczników.

Przykład przejazdów na żądanie

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

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

Przykład zaplanowanych zadań

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

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

Filtrowanie widocznych znaczników

Jeśli musisz użyć metody setVisible, postępuj zgodnie z tym wzorcem, aby filtrować dowolne znaczniki za pomocą dowolnej z opcji wymienionych w sekcji Opcje dostosowywania znaczników powyżej.

Przykład przejazdów na żądanie

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

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

Przykład zaplanowanych zadań

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

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

Co dalej?

• Stylizowanie mapy
• Dostosowywanie polilinii