Personalizza gli indicatori

Seleziona la piattaforma: Android iOS JavaScript

Personalizza l'aspetto dei marcatori aggiunti alla mappa. Puoi personalizzare l'aspetto dei marcatori aggiunti alla mappa in due 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 alcuni esempi, vedere Modificare lo stile dei marcatori utilizzando MarkerOptions in questa guida.

2. Stila indicatori in base ai dati: specifica una funzione di personalizzazione per stilare indicatori in base ai dati. È possibile definire lo stile in base ai dati provenienti dalla condivisione del percorso o da fonti esterne:

   • Dati della condivisione del viaggio: la condivisione del viaggio trasmette i dati dei marcatori alla funzione di personalizzazione, incluso il tipo di oggetto che il marcatore rappresenta: veicolo, origine, waypoint o destinazione. Lo stile del marcatore cambia quindi in base allo stato corrente dell'elemento marcatore. Ad esempio, il numero di waypoint rimanenti prima che il veicolo completi il viaggio.

   • Fonti esterne: puoi combinare i dati di condivisione del viaggio con dati provenienti da fonti esterne a Fleet Engine e applicare uno stile al marcatore in base a queste informazioni.

   Per alcuni esempi, vedere Modificare lo stile dei marcatori utilizzando le funzioni di personalizzazione in questa guida.

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

Opzioni di personalizzazione dei segnaposto

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

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

Cambia lo stile dei marcatori usando MarkerOptions

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Modificare lo stile dei marcatori utilizzando le funzioni di personalizzazione

L'esempio seguente mostra come configurare lo stile dei marcatori dei veicoli 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.

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 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 uno qualsiasi dei parametri di personalizzazione dell'indicatore elencati in Opzioni di personalizzazione dell'indicatore.

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