En este documento, se explica cómo personalizar las polilíneas de ruta para el mapa que usas en tu app de seguimiento de recorridos basada en la Web para usuarios consumidores.
Con el SDK de consumidor, puedes controlar la visibilidad de la polilínea de ruta o aplicar diseño a la ruta de un viaje en el mapa. El SDK crea un objeto google.maps.Polyline
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 los datos utilizados para los objetos cambian
Cómo aplicar diseño a las polilíneas de rutas
Del mismo modo que puedes aplicar diseño a los marcadores, puedes aplicar ajustes de diseño a las polilíneas de rutas con parámetros de personalización. Desde allí, puedes configurar el diseño con uno de los siguientes enfoques:
- El más simple: Usa
PolylineOptions
para aplicar a todos los objetosPolyline
coincidentes cuando se crean o actualizan. - Avanzado: Especifica una función de personalización.
Las funciones de personalización permiten un diseño individual de los objetos según 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, puede darle un tono más oscuro al objeto
Polyline
o hacerlo más grueso cuando el vehículo se mueve más lento. Incluso puedes unirte a fuentes externas de Fleet Engine y aplicar diseño al objetoPolyline
según esa información.
Parámetros de personalización
Cuando aplicas diseño a las polilíneas de rutas, debes usar los parámetros proporcionados en FleetEngineTripLocationProviderOptions
. Estos parámetros proporcionan diferentes estados de ruta en el viaje del vehículo, como se indica a continuación:
- 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 de 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 mencionadas anteriormente.
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Cómo usar funciones de personalización para definir el diseño de polilíneas de rutas
En el siguiente ejemplo, se muestra cómo configurar el diseño de un polilinea de ruta activo. 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 enumeraron anteriormente.
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'});
}
}
};
Cómo controlar la visibilidad de las polilíneas de rutas
De forma predeterminada, todos los objetos Polyline
son visibles. Para hacer que un objeto Polyline
sea invisible, establece su propiedad visible
:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};