Personalizza indicatori

Grazie alla libreria JavaScript per il monitoraggio della flotta, puoi personalizzare l'aspetto dei marcatori aggiunti alla mappa. Ciò è possibile specificando le personalizzazioni dei marcatori, che la libreria di monitoraggio della flotta applica prima di aggiungere marcatori alla mappa e a ogni aggiornamento dei marcatori. Puoi personalizzare l'aspetto dei marcatori nei seguenti modi:

  1. Marcatori di stile in base al tipo: specifica un oggetto MarkerOptions per applicare lo stile ai marcatori dello stesso tipo. Le modifiche specificate vengono applicate dopo la creazione di ciascun marcatore, sovrascrivendo tutte le opzioni predefinite. Per esempi, vedi Indicatori di stile in base al tipo in questa guida.

  2. Marcatori di stile basati sui dati: specifica una funzione di personalizzazione basata sui dati, oltre ad aggiungere interattività ai marcatori, come la gestione dei clic. È possibile definire lo stile in base ai dati provenienti dal monitoraggio della flotta o da fonti esterne:

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

    • Fonti esterne: puoi combinare i dati di monitoraggio della flotta con dati provenienti da fonti esterne a Fleet Engine e definire lo stile del marcatore in base a tali informazioni.

    Per esempi, vedere Marcatori di stile basati sui dati.

  3. Aggiungi la gestione dei clic ai marcatori: per alcuni esempi, vedi Aggiungere la gestione dei clic.

  4. Filtra i marcatori visibili: filtra i marcatori visualizzati con le funzionalità di filtraggio disponibili nel provider di posizione JavaScript. Ad esempio:

  5. Utilizza la personalizzazione dei marcatori per monitorare un veicolo di consegna delle attività pianificate: Puoi personalizzare i marcatori per monitorare i veicoli. Per saperne di più, consulta Utilizzare la personalizzazione dei marcatori per monitorare un veicolo di consegna.

Opzioni di personalizzazione dei segnaposto

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

Parametri di personalizzazione delle corse on demand

Parametri di personalizzazione delle attività pianificate

Applicare uno stile ai marcatori in base al tipo

L'esempio seguente 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 in 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 ai marcatori in base ai dati

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

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 ai marcatori

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 in Opzioni di personalizzazione degli indicatori sopra.

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 i marcatori visibili

Se devi utilizzare setVisible, segui questo pattern per filtrare i marcatori utilizzando una delle opzioni elencate in Opzioni di personalizzazione dei marcatori sopra.

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