Personalizza gli indicatori

Personalizza l'aspetto degli indicatori aggiunti alla mappa. Personalizza l'aspetto degli indicatori aggiunti alla mappa in due modi:

1. Stilizza gli indicatori in base al tipo: specifica un oggetto MarkerOptions per stilizzare gli indicatori dello stesso tipo. Le modifiche specificate vengono quindi applicate dopo la creazione di ogni indicatore, sovrascrivendo eventuali opzioni predefinite. Per alcuni esempi, consulta Modifica lo stile degli indicatori utilizzando MarkerOptions in questa guida.

2. Stile degli indicatori in base ai dati: specifica una funzione di personalizzazione per applicare uno stile agli indicatori in base ai dati. Puoi applicare uno stile in base ai dati della condivisione del percorso o di fonti esterne:

   • Dati dalla condivisione del percorso: la condivisione del percorso passa i dati dell'indicatore alla funzione di personalizzazione, incluso il tipo di oggetto rappresentato dall'indicatore: veicolo, origine, waypoint o destinazione. Lo stile dell'indicatore cambia quindi in base allo stato corrente dell'elemento indicatore. Ad esempio, il numero di tappe rimanenti prima che il veicolo termini il percorso.

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

   Per alcuni esempi, consulta Modifica lo stile degli indicatori utilizzando le funzioni di personalizzazione in questa guida.

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

Opzioni di personalizzazione degli indicatori

Entrambe le opzioni utilizzano i seguenti parametri di personalizzazione nell'API Maps JavaScript di Google Maps in FleetEngineTripLocationProviderOptions:

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Modifica lo stile degli indicatori utilizzando MarkerOptions

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

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Modifica lo stile degli indicatori utilizzando le funzioni di personalizzazione

L'esempio seguente mostra come configurare lo stile dell'indicatore del veicolo utilizzando le funzioni di personalizzazione. Segui questo pattern per personalizzare lo stile di qualsiasi indicatore utilizzando uno dei parametri di personalizzazione degli indicatori elencati in Opzioni di personalizzazione degli indicatori.

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

Aggiungi la gestione dei clic agli indicatori

L'esempio seguente 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 uno qualsiasi dei parametri di personalizzazione degli indicatori elencati in Opzioni di personalizzazione degli indicatori.

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

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

Passaggi successivi

• Personalizza le polilinee dei percorsi