Personalizza le polilinee del percorso

Seleziona la piattaforma: Android iOS JavaScript

Questo documento spiega come personalizzare i polilinei dei percorsi per la mappa che utilizzi nella tua app di monitoraggio dei percorsi basata sul web per gli utenti consumer.

Con l'SDK Consumer, puoi controllare la visibilità della polilinea del percorso o impostarne lo stile per il percorso di un viaggio sulla mappa. L'SDK crea un oggetto google.maps.Polyline per ogni coppia di coordinate nel percorso attivo o rimanente del percorso. La raccolta applica queste personalizzazioni in due situazioni:

  • prima di aggiungere gli oggetti alla mappa
  • quando i dati utilizzati per gli oggetti sono cambiati

Personalizzare le polilinee dei percorsi

Analogamente a come puoi applicare stili ai marcatori, puoi applicare stili alle polilinee dei percorsi utilizzando parametri di personalizzazione. Da qui, puoi configurare lo stile utilizzando uno dei seguenti approcci:

  • Più semplice: utilizza PolylineOptions per applicare l'azione a tutti gli oggetti Polyline corrispondenti quando vengono creati o aggiornati.
  • Avanzate: specifica una funzione di personalizzazione. Le funzioni di personalizzazione consentono di applicare stili individuali agli oggetti in base ai dati inviati da Fleet Engine. La funzione può modificare lo stile di ogni oggetto in base allo stato corrente del viaggio, ad esempio colorandolo Polyline di una tonalità più scura o rendendolo più spesso quando il veicolo si muove più lentamente. Puoi anche eseguire join da origini esterne a Fleet Engine e impostare lo stile dell'oggetto Polyline in base a queste informazioni.

Parametri di personalizzazione

Quando stili le polilinee del percorso, utilizza i parametri forniti in FleetEngineTripLocationProviderOptions. Questi parametri prevedono diversi stati del percorso nel tragitto del veicolo, come segue:

Utilizza PolylineOptions

L'esempio seguente mostra come configurare lo stile di un oggetto Polyline con PolylineOptions. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando una delle personalizzazioni di polilinee elencate in precedenza.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

Utilizzare le funzioni di personalizzazione per applicare stili alle polilinee dei percorsi

L'esempio seguente mostra come configurare lo stile per un polyline di percorso attivo. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando uno dei parametri di personalizzazione del polilinea del percorso elencati in precedenza.

JavaScript

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Controllare la visibilità della polilinea del percorso

Per impostazione predefinita, tutti gli oggetti Polyline sono visibili. Per rendere un oggetto Polyline invisibile, imposta la relativa proprietà visible:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};