Personalizza le polilinee del percorso

Seleziona la piattaforma: Android iOS JavaScript

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

Con l'SDK Consumer, puoi controllare la visibilità della polilinea del percorso o applicare uno stile alla polilinea del percorso per un tragitto sulla mappa. L'SDK crea un oggetto google.maps.Polyline per ogni coppia di coordinate nel percorso attivo o rimanente del percorso. La libreria applica quindi queste personalizzazioni in due situazioni:

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

Stile delle polilinee dei percorsi

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

  • Più semplice: utilizza PolylineOptions per applicare l'etichetta a tutti gli oggetti Polyline corrispondenti quando vengono creati o aggiornati.
  • Avanzate: specifica una funzione di personalizzazione. Le funzioni di personalizzazione consentono di applicare uno stile individuale agli oggetti in base ai dati inviati da Fleet Engine. La funzione può modificare lo stile di ogni oggetto in base allo stato attuale del percorso, ad esempio colorando l'oggetto Polyline con una tonalità più scura o rendendolo più spesso quando il veicolo si muove più lentamente. Puoi anche unire dati provenienti da origini esterne a Fleet Engine e applicare uno stile all'oggetto Polyline in base a queste informazioni.

Parametri di personalizzazione

Per applicare uno stile alle polilinee dei percorsi, 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 delle polilinee elencate in precedenza.

JavaScript

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

TypeScript

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

Utilizza le funzioni di personalizzazione per applicare uno stile alle polilinee dei percorsi

L'esempio seguente mostra come configurare lo stile di una polilinea di un percorso attivo. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando uno dei parametri di personalizzazione della 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'});
      }
    }
  };

Controlla la visibilità della polilinea del percorso

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

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};