Personalizza le polilinee del percorso

Questo documento illustra come personalizzare le polilinee del percorso per la mappa che utilizzi nell'app di monitoraggio dei viaggi basata sul web per utenti consumer e operatori di flotte.

Con Consumer SDK, puoi controllare la visibilità della polilinea del percorso o applicare uno stile alla polilinea del percorso di un viaggio sulla mappa. L'SDK crea un google.maps.Polyline oggetto per ogni coppia di coordinate nel percorso attivo o rimanente del viaggio. 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

Applicare uno stile alle polilinee del percorso

Analogamente a come puoi applicare uno stile ai marcatori, puoi applicare uno stile alle polilinee del percorso utilizzando i parametri di personalizzazione. Da qui, configura lo stile utilizzando uno dei seguenti approcci:

• Più semplice: utilizza PolylineOptions per applicare a tutti gli oggetti corrispondenti Polyline quando vengono creati o aggiornati.
• Avanzato: 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 viaggio, ad esempio colorando l'oggetto Polyline con una tonalità più scura o rendendolo più spesso quando il veicolo si muove più lentamente. Puoi persino unire le origini esterne a Fleet Engine e applicare uno stile all'oggetto Polyline in base a queste informazioni.

Parametri di personalizzazione

Quando applichi uno stile alle polilinee del percorso, utilizzi i parametri forniti in FleetEngineShipmentLocationProviderOptions. Questi parametri forniscono diversi stati del percorso nel viaggio del veicolo, come segue:

• Percorsi già percorsi: utilizza takenPolylineCustomization.
• Percorso percorso attivamente: utilizza activePolylineCustomization.
• Percorso non ancora percorso: utilizza remainingPolylineCustomization.

Utilizzare PolylineOptions

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

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

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

Utilizzare le funzioni di personalizzazione per applicare uno stile alle polilinee del percorso

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

// Color the route polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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'});
      }
    }
  };

// Color the route Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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 invisibile un oggetto Polyline, imposta la relativa proprietà visible:

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};