Personalizza indicatori

Con la libreria JavaScript per il monitoraggio della flotta, puoi personalizzare l'aspetto degli indicatori aggiunti alla mappa. Per farlo, devi specificare le personalizzazioni degli indicatori, che la libreria per il 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. Applicare uno stile agli indicatori in base al tipo: specifica un MarkerOptions oggetto per applicare uno stile agli indicatori dello stesso tipo. Le modifiche specificate vengono applicate dopo la creazione di ogni indicatore, sovrascrivendo le opzioni predefinite. Per alcuni esempi, consulta la sezione Applicare uno stile agli indicatori in base al tipo di questa guida.

  2. Applicare uno stile agli indicatori in base ai dati: specifica una funzione di personalizzazione basata sui dati, oltre ad aggiungere interattività agli indicatori, ad esempio la gestione dei clic. Puoi applicare uno stile in base ai dati del monitoraggio della flotta o a quelli di origini esterne:

    • Dati del monitoraggio della flotta: il monitoraggio della flotta passa 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 attuale dell'elemento dell'indicatore. Ad esempio, il numero di fermate rimanenti o il tipo di attività.

    • Origini esterne: puoi combinare i dati del monitoraggio della flotta con i dati di origini esterne a Fleet Engine e applicare uno stile all'indicatore anche in base a queste informazioni.

    Per alcuni esempi, consulta la sezione Applicare uno stile agli indicatori in base ai dati.

  3. Aggiungere la gestione dei clic agli indicatori: per alcuni esempi, consulta la sezione Aggiungere la gestione dei clic.

  4. Filtrare gli indicatori visibili: filtra gli indicatori visualizzati con le funzionalità di filtro disponibili nel provider di località JavaScript Ad esempio:

  5. Utilizzare la personalizzazione degli indicatori per monitorare un veicolo di consegna delle attività pianificate: Puoi personalizzare gli indicatori per monitorare i veicoli. Per saperne di più, consulta la sezione Utilizzare la personalizzazione degli indicatori per monitorare un veicolo di consegna.

Opzioni di personalizzazione degli indicatori

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

Parametri di personalizzazione dei viaggi on demand

Parametri di personalizzazione delle attività pianificate

Applicare uno stile agli indicatori in base al tipo

Il seguente esempio mostra come configurare lo stile di un indicatore del veicolo con un oggetto MarkerOptions. Segui questo pattern per personalizzare lo stile di qualsiasi indicatore utilizzando una delle opzioni elencate nella sezione Opzioni di personalizzazione degli indicatori.

Esempio di viaggi on demand

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Esempio di attività pianificate

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Applicare uno stile agli indicatori in base ai dati

Il seguente esempio mostra come configurare lo stile di un indicatore del veicolo utilizzando le funzioni di personalizzazione. Segui questo pattern per personalizzare lo stile di qualsiasi indicatore in base ai dati utilizzando una delle opzioni elencate nella sezione Opzioni di personalizzazione degli indicatori sopra riportata.

Esempio di viaggi 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

Il seguente esempio mostra come aggiungere la gestione dei clic a un indicatore del veicolo. Segui questo pattern per aggiungere la gestione dei clic a qualsiasi indicatore utilizzando una delle opzioni elencate nella sezione Opzioni di personalizzazione degli indicatori sopra riportata.

Esempio di viaggi 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 gli indicatori visibili

Se devi utilizzare setVisible, segui questo pattern per filtrare qualsiasi indicatore utilizzando una delle opzioni elencate nella sezione Opzioni di personalizzazione degli indicatori sopra riportata.

Esempio di viaggi 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