Personaliza las polilíneas de rutas

En este documento, se explica cómo personalizar las polilíneas de ruta para el mapa que usas en tu app de seguimiento de viajes basada en la Web para usuarios consumidores.

Con el SDK de Consumer, puedes controlar la visibilidad de la polilínea de ruta o aplicar diseño a la polilínea de ruta para la ruta de un viaje en el mapa. El SDK crea un google.maps.Polyline objeto para cada par de coordenadas en la ruta activa o restante del viaje. Luego, la biblioteca aplica estas personalizaciones en dos situaciones:

• antes de agregar los objetos al mapa
• cuando cambiaron los datos que se usan para los objetos

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

Al igual que puedes aplicar diseño a los marcadores, puedes aplicar diseño a las polilíneas de ruta con parámetros de personalización. A partir de ahí, puedes configurar el diseño con uno de los siguientes enfoques:

• Más simple: Usa PolylineOptions para aplicar a todos los objetos coincidentes Polyline cuando se crean o actualizan.
• Avanzado: Especifica una función de personalización. Las funciones de personalización permiten aplicar diseño individual a los objetos en función de los datos que envía Fleet Engine. La función puede cambiar el diseño de cada objeto según el estado actual del viaje; por ejemplo, colorear el objeto Polyline con un tono más oscuro o hacerlo más grueso cuando el vehículo se mueve más lento. Incluso puedes unir desde fuentes externas a Fleet Engine y aplicar diseño al objeto Polyline en función de esa información.

Parámetros de personalización

Cuando aplicas diseño a las polilíneas de ruta, usas los parámetros que se proporcionan en FleetEngineTripLocationProviderOptions. Estos parámetros proporcionan diferentes estados de ruta en el viaje del vehículo, de la siguiente manera:

• Rutas ya recorridas: Usa takenPolylineCustomization.
• Ruta recorrida de forma activa: Usa activePolylineCustomization.
• Ruta aún no recorrida: Usa .remainingPolylineCustomization

Usa PolylineOptions

En el siguiente ejemplo, se muestra cómo configurar el diseño para un objeto Polyline con PolylineOptions. Sigue este patrón para personalizar el diseño de cualquier objeto Polyline con cualquiera de las personalizaciones de polilíneas que se mencionaron anteriormente.

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

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

Usa funciones de personalización para aplicar diseño a las polilíneas de ruta

En el siguiente ejemplo, se muestra cómo configurar el diseño para una polilínea de ruta activa. Sigue este patrón para personalizar el diseño de cualquier objeto Polyline con cualquiera de los parámetros de personalización de polilíneas de ruta que se mencionaron anteriormente.

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

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

Controla la visibilidad de la polilínea de ruta

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

remainingPolylineCustomization = {visible: false};

remainingPolylineCustomization = {visible: false};