Personalizza gli indicatori

Seleziona la piattaforma: Android iOS JavaScript

Personalizza l'aspetto degli indicatori aggiunti alla mappa. Personalizza l'aspetto degli indicatori aggiunti alla mappa in due 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 Cambiare lo stile degli indicatori utilizzando MarkerOptions in questa guida.

2. Indicatori di stile 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 origini esterne:

   • Dati provenienti dalla condivisione dei viaggi: la condivisione dei viaggi trasmette i dati degli indicatori alla funzione di personalizzazione, incluso il tipo di oggetto rappresentato dall'indicatore: veicolo, origine, tappa o destinazione. Lo stile dell'indicatore cambia in base allo stato corrente dell'elemento indicatore. Ad esempio, il numero di tappe restanti fino al termine del viaggio.

   • Origini esterne: puoi combinare i dati sulla condivisione dei viaggi con quelli di origini esterne a Fleet Engine e impostare lo stile dell'indicatore anche in base a queste informazioni.

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

3. Aggiungi la gestione dei clic agli indicatori: per esempi, consulta Aggiungi la gestione dei clic.

Opzioni di personalizzazione degli indicatori

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

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Modificare lo stile degli indicatori utilizzando MarkerOptions

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Modificare lo stile degli indicatori utilizzando le funzioni di personalizzazione

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

JavaScript

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

TypeScript

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

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 uno dei parametri di personalizzazione degli indicatori elencati in Opzioni di personalizzazione degli indicatori.

JavaScript

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

TypeScript

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

Passaggi successivi

• Personalizzare le polilinee del percorso