Personaliza las polilíneas de rutas

En este documento, se explica cómo personalizar la apariencia de las rutas de los vehículos rastreados en un mapa. Las rutas se dibujan en un mapa en forma de polilíneas. Para cada par de coordenadas en la ruta activa o restante de un vehículo, la biblioteca crea un google.maps.Polyline objeto. Puedes aplicar diseño a los objetos Polyline especificando personalizaciones de polilíneas que la biblioteca aplica en dos situaciones:

  • Antes de agregar los objetos al mapa
  • Cuando cambian los datos que se usan para los objetos

Cómo aplicar diseño a polilíneas

Al igual que puedes personalizar los marcadores, puedes aplicar diseño a las polilíneas de ruta de diferentes maneras:

  1. Aplicar diseño a las polilíneas de ruta por tipo: Usa PolylineOptions para aplicar a todos los objetos Polyline coincidentes cuando se crean o actualizan. Para ver un ejemplo, consulta Cómo aplicar diseño a polilíneas por tipo.

  2. Aplicar diseño a las polilíneas de ruta según los datos: Especifica una función de personalización basada en datos del seguimiento de la flota o de fuentes externas:

    • Datos del seguimiento de la flota: El seguimiento de la flota pasa datos de polilíneas a la función de personalización, incluidos los datos sobre el estado actual del vehículo. Puedes aplicar diseño a las polilíneas en función de estos datos, incluido el color del objeto Polyline en un tono más oscuro o hacerlo más grueso cuando el vehículo se mueve más lento.

    • Fuentes externas: Puedes combinar datos de seguimiento de la flota con datos de fuentes externas a Fleet Engine y aplicar diseño al objeto Polyline en función de esa información.

    Para ver un ejemplo, consulta Cómo aplicar diseño a polilíneas según los datos.

  3. Controlar la visibilidad de las polilíneas de ruta: Puedes ocultar o mostrar polilíneas con la propiedad visible. Para obtener más detalles, consulta Cómo controlar la visibilidad de las polilíneas en esta guía.

  4. Mostrar información adicional para un marcador de vehículo o ubicación: Puedes mostrar información adicional con la propiedad infowindow. Para obtener más detalles, consulta Cómo mostrar información adicional para un marcador de vehículo o ubicación en esta guía.

Opciones de personalización de polilíneas

Las siguientes opciones de personalización están disponibles en FleetEngineVehicleLocationProviderOptions y FleetEngineDeliveryVehicleLocationProviderOptions. Puedes configurar personalizaciones para diferentes estados de ruta en el viaje del vehículo:

Cómo aplicar diseño a polilíneas de ruta por tipo

Para aplicar diseño a las polilíneas de ruta por tipo, cambia el diseño de los objetos Polyline con PolylineOptions.

En el siguiente ejemplo, se muestra cómo configurar el diseño de un objeto Polyline con PolylineOptions. Sigue este patrón para personalizar el diseño de cualquier Polyline objeto con cualquiera de las personalizaciones de polilíneas de ruta que se enumeran en Opciones de personalización de polilíneas en esta guía.

Ejemplo para viajes bajo demanda o tareas programadas

JavaScript

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

TypeScript

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

Cómo aplicar diseño a polilíneas de ruta con datos

Para aplicar diseño a las polilíneas de ruta con datos, cambia el diseño de los objetos Polyline con funciones de personalización.

En el siguiente ejemplo, se muestra cómo configurar el diseño de una ruta activa con una función de personalización. Sigue este patrón para personalizar el diseño de cualquier Polyline objeto con cualquiera de los parámetros de personalización de polilíneas que se enumeran en Opciones de personalización de polilíneas en esta guía.

Ejemplo de viajes bajo demanda

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'});
      }
    }
  };

Ejemplo de tareas programadas

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'});
      }
    }
  };

Ejemplo de diseño con información del tráfico (solo para viajes bajo demanda)

Fleet Engine muestra datos de velocidad del tráfico para las rutas activas y restantes del vehículo seguido. Puedes usar esta información para aplicar diseño a los objetos Polyline según sus velocidades de tráfico:

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'});
      }
    }
  };

Cómo controlar la visibilidad de las polilíneas

De forma predeterminada, todos los objetos Polyline son visibles. Para que un objeto Polyline sea invisible, establece su visible propiedad en false.

Ejemplo para viajes bajo demanda o tareas programadas

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

Cómo mostrar una ventana de información para un marcador de vehículo o ubicación

Puedes usar un InfoWindow para mostrar información adicional sobre un marcador de vehículo o ubicación.

En el siguiente ejemplo, se muestra cómo crear un InfoWindow y adjuntarlo a un marcador de vehículo.

Ejemplo de viajes bajo demanda

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();

Ejemplo de tareas programadas

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();

¿Qué sigue?