Personalizza le polilinee del percorso

Questo documento spiega come personalizzare l'aspetto dei percorsi per i veicoli monitorati su una mappa. I percorsi vengono tracciati su una mappa in polilinee. Per ogni coppia di coordinate nel percorso attivo o rimanente di un veicolo, la libreria crea un oggetto google.maps.Polyline. Puoi applicare uno stile agli oggetti Polyline specificando personalizzazioni della polilinea che la libreria applica in due situazioni:

  • Prima di aggiungere gli oggetti alla mappa
  • Quando i dati utilizzati per gli oggetti sono cambiati

Modificare lo stile delle polilinee

Analogamente a come puoi personalizzare i marcatori, puoi applicare stili diversi alle polilinee degli itinerari:

  1. Stilizza le polilinee degli itinerari per tipo: utilizza PolylineOptions per applicare a tutti gli oggetti Polyline corrispondenti quando vengono creati o aggiornati. Per un esempio, vedi Applicare uno stile alle polilinee in base al tipo.

  2. Applica stili alle polilinee degli itinerari in base ai dati: specifica una funzione di personalizzazione in base ai dati del monitoraggio della flotta o di origini esterne:

    • Dati dal monitoraggio della flotta: il monitoraggio della flotta passa i dati polilineari alla funzione di personalizzazione, inclusi i dati sullo stato attuale del veicolo. Puoi applicare uno stile alle polilinee in base a questi dati, ad esempio colorando l'oggetto Polyline con una tonalità più scura o rendendolo più spesso quando il veicolo si muove più lentamente.

    • Origini esterne: puoi combinare i dati di monitoraggio della flotta con quelli provenienti da origini esterne a Fleet Engine e applicare uno stile all'oggetto Polyline in base a queste informazioni.

    Per un esempio, consulta Applicare uno stile alle polilinee in base ai dati.

  3. Controlla la visibilità delle polilinee del percorso: puoi nascondere o mostrare le polilinee utilizzando la proprietà visible. Per maggiori dettagli, vedi Controllare la visibilità delle polilinee in questa guida.

  4. Visualizzare ulteriori informazioni per un veicolo o un indicatore di posizione: Puoi mostrare ulteriori informazioni utilizzando la proprietà infowindow. Per maggiori dettagli, consulta Visualizzare informazioni aggiuntive per un veicolo o un indicatore di posizione in questa guida.

Opzioni di personalizzazione delle polilinee

Le seguenti opzioni di personalizzazione sono disponibili sia in FleetEngineVehicleLocationProviderOptions che in FleetEngineDeliveryVehicleLocationProviderOptions. Puoi impostare personalizzazioni per diversi stati del percorso durante il viaggio del veicolo:

Stilizzare le polilinee dell'itinerario per tipo

Per applicare uno stile alle polilinee delle route in base al tipo, modifica lo stile degli oggetti Polyline utilizzando 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 della polilinea dell'itinerario elencate in Opzioni di personalizzazione della polilinea in questa guida.

Esempio per viaggi on demand o attività pianificate

JavaScript

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

TypeScript

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

Applicare uno stile alle polilinee delle route utilizzando i dati

Per applicare uno stile alle polilinee dell'itinerario utilizzando i dati, modifica lo stile degli oggetti Polyline utilizzando le funzioni di personalizzazione.

L'esempio seguente mostra come configurare lo stile di un percorso attivo utilizzando una funzione di personalizzazione. Segui questo pattern per personalizzare lo stile di qualsiasi oggetto Polyline utilizzando uno qualsiasi dei parametri di personalizzazione delle polilinee elencati in Opzioni di personalizzazione delle polilinee in questa guida.

Esempio di viaggi on demand

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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'});
      }
    }
  };

Esempio di attività pianificate

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

Esempio di stile basato sul traffico (solo per le corse on demand)

Fleet Engine restituisce i dati sulla velocità del traffico per i percorsi attivi e rimanenti per il veicolo seguito. Puoi utilizzare queste informazioni per applicare uno stile agli oggetti Polyline in base alla velocità del traffico:

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

Controllare la visibilità delle polilinee

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

Esempio per viaggi on demand o attività pianificate

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Visualizzare una finestra informativa per un segnaposto di un veicolo o di una posizione

Puoi utilizzare un InfoWindow per visualizzare informazioni aggiuntive su un veicolo o un indicatore di posizione.

L'esempio seguente mostra come creare un InfoWindow e allegarlo a un indicatore del veicolo.

Esempio di viaggi on demand

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Esempio di attività pianificate

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

Passaggi successivi