Personalizza indicatori

Con la libreria JavaScript per il monitoraggio della flotta, puoi personalizzare l'aspetto e il comportamento dei marker aggiunti alla mappa. A tale scopo, specifica le personalizzazioni degli indicatori, che la libreria di monitoraggio della flotta applica prima di aggiungere gli indicatori alla mappa e a ogni aggiornamento degli indicatori. Puoi personalizzare l'aspetto degli indicatori nei seguenti modi:

  1. Indicatori di stile in base al tipo: specifica un oggetto MarkerOptions per applicare stili agli indicatori dello stesso tipo. Le modifiche specificate vengono poi applicate dopo la creazione di ogni indicatore, sovrascrivendo eventuali opzioni predefinite. Per alcuni esempi, consulta Indicatori di stile in base al tipo in questa guida.

  2. Personalizza gli indicatori in base ai dati: specifica una funzione di personalizzazione in base ai dati, nonché l'aggiunta di interattività agli indicatori, ad esempio la gestione dei clic. Puoi applicare uno stile in base ai dati del monitoraggio della flotta o di fonti esterne:

    • Dati del monitoraggio della flotta: il monitoraggio della flotta trasmette i dati alla funzione di personalizzazione, incluso il tipo di oggetto rappresentato dall'indicatore: veicolo, fermata o attività. Lo stile dell'indicatore cambia in base allo stato corrente dell'elemento indicatore. Ad esempio, il numero di fermate rimanenti o il tipo di attività.

    • Origini esterne: puoi combinare i dati di monitoraggio della flotta con quelli di altre origini esterne a Fleet Engine e impostare lo stile dell'indicatore anche in base a queste informazioni.

    Per esempi, consulta Stili degli indicatori basati sui dati.

  3. Aggiungi la gestione dei clic ai marker: per esempi, consulta Aggiungere la gestione dei clic.

  4. Filtra i marker visibili: filtra i marker visualizzati con le funzionalità di filtro disponibili nel fornitore di servizi di geolocalizzazione JavaScript. Ad esempio:

  5. Utilizza la personalizzazione degli indicatori per monitorare un veicolo di consegna delle attività pianificate: puoi personalizzare gli indicatori per monitorare i veicoli. Per ulteriori informazioni, vedi Utilizzare la personalizzazione degli indicatori per monitorare un veicolo di consegna.

Opzioni di personalizzazione degli indicatori

La libreria di monitoraggio della flotta fornisce i seguenti parametri di personalizzazione:

Parametri di personalizzazione dei viaggi on demand

Parametri di personalizzazione delle attività pianificate

Indicatori di stile in base al tipo

L'esempio seguente mostra come configurare lo stile di un indicatore di veicolo con un oggetto MarkerOptions. Segui questo modello per personalizzare lo stile di qualsiasi indicatore utilizzando una delle opzioni elencate in Opzioni di personalizzazione degli indicatori.

Esempio di corse on demand

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Esempio di attività pianificate

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Stilare indicatori in base ai dati

L'esempio seguente mostra come configurare lo stile di un indicatore di veicolo utilizzando le funzioni di personalizzazione. Segui questo modello per personalizzare lo stile di qualsiasi indicatore in base ai dati utilizzando una delle opzioni elencate in Opzioni di personalizzazione degli indicatori sopra.

Esempio di corse on demand

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

Esempio di attività pianificate

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

Aggiungere la gestione dei clic agli indicatori

L'esempio seguente mostra come aggiungere la gestione dei clic a un indicatore di veicolo. Segui questo pattern per aggiungere la gestione dei clic a qualsiasi indicatore utilizzando una delle opzioni elencate in Opzioni di personalizzazione degli indicatori sopra indicate.

Esempio di corse on demand

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

Esempio di attività pianificate

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

Filtrare i indicatori visibili

Se devi utilizzare setVisible, segui questo modello per filtrare gli indicatori utilizzando una delle opzioni elencate in Opzioni di personalizzazione degli indicatori sopra.

Esempio di corse on demand

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

Esempio di attività pianificate

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

Passaggi successivi