Dostosuj znaczniki

Za pomocą biblioteki śledzenia floty w JavaScript możesz dostosować wygląd znaczników dodawanych do mapy. Możesz to zrobić, określając dostosowania markerów, które biblioteka śledzenia floty zastosuje przed dodaniem markerów do mapy i przy każdej aktualizacji markera. Wygląd markerów możesz dostosować w ten sposób:

  1. Stylizuj markery na podstawie typu: określ obiekt MarkerOptions do stylizowania markerów tego samego typu. Wprowadzone zmiany są stosowane po utworzeniu każdego znacznika, co powoduje zastąpienie opcji domyślnych. Przykłady znajdziesz w sekcji Stylizowanie markeró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 do znaczników interaktywność, np. obsługę kliknięć. Stylizację możesz dostosować na podstawie danych z ś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 marker: pojazd, przystanek lub zadanie. Styl znacznika zmieni się wtedy w zależności od jego bieżącego stanu. Może to być np. liczba pozostałych przystanków lub rodzaj zadania.

    • Źródła zewnętrzne: możesz połączyć dane śledzenia floty 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 artykule Style markers based on data (Markery stylu 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 znaczniki, które mają się pojawiać, za pomocą funkcji filtrowania dostępnych w dostawcy lokalizacji JavaScript. Na przykład:

  5. Używanie dostosowywania markerów do śledzenia pojazdu dostarczającego zaplanowane zadania: możesz dostosowywać markery, aby śledzić pojazdy. Więcej informacji znajdziesz w artykule Śledzenie pojazdu dostawczego za pomocą dostosowanych znaczników.

Opcje dostosowywania znacznika

Biblioteka śledzenia floty udostępnia te parametry dostosowywania:

Parametry dostosowywania przejazdów na żądanie

Parametry dostosowywania zaplanowanych zadań

Stylizowanie znaczników na podstawie typu

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

Przykład przejazdów na żądanie

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Przykład zaplanowanych zadań

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Stylizowanie znaczników 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 znacznika na podstawie danych, korzystając z dowolnej z opcji wymienionych w sekcji Opcje dostosowywania znaczników powyżej.

Przykład przejazdów 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

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 opcji wymienionych w sekcji Opcje dostosowywania znaczników powyżej.

Przykład przejazdów 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.
      });
    }
  };

Filtrowanie widocznych znaczników

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

Przykład przejazdów 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?