Personalizza gli indicatori

Personalizza l'aspetto degli indicatori aggiunti alla mappa. Personalizza il look gli indicatori sono stati aggiunti alla mappa in due modi:

1. Indicatori di stile in base al tipo: specifica un MarkerOptions: per applicare uno stile agli indicatori dello stesso tipo. Le modifiche specificate sono applicati dopo la creazione di ciascun indicatore, sovrascrivendo eventuali opzioni predefinite. Per esempi, consulta Modificare lo stile degli indicatori utilizzando MarkerOptions in questa guida.

2. Indicatori di stile in base ai dati. Specifica una funzione di personalizzazione per gli indicatori di stile in base ai dati. Puoi definire lo stile in base ai dati del percorso condivisibili o da fonti esterne:

   • Dati provenienti dalla condivisione dei viaggi: i dati degli indicatori delle tessere per la condivisione dei viaggi al funzione di personalizzazione che comprende il tipo di oggetto rappresentato dall'indicatore: veicolo, luogo di partenza, tappa o destinazione. Lo stile dell'indicatore cambia in base allo stato corrente dell'elemento indicatore. Ad esempio, il numero di tappe rimanenti fino al termine della corsa del veicolo.

   • Fonti esterne: puoi combinare i dati di condivisione dei viaggi con da origini esterne a Fleet Engine e definire lo stile dell'indicatore in base a informazioni.

   Per alcuni esempi, vedi 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 modello 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'
};

Modificare lo stile degli indicatori utilizzando le funzioni di personalizzazione

L'esempio seguente mostra come configurare lo stile degli indicatori di veicoli utilizzando 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.

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 gestione dei clic agli indicatori

L'esempio seguente mostra come aggiungere la gestione dei clic a un indicatore di veicolo. Segui questo modello per aggiungere la gestione dei clic a qualsiasi indicatore utilizzando uno 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

• Personalizzare le polilinee del percorso