En este documento, se explica cómo personalizar las polilíneas de rutas para el mapa que usas en tu aplicación de seguimiento de recorridos basada en la Web para usuarios consumidores y operadores de flotas.
Con el SDK del consumidor, puedes controlar la visibilidad de la polilínea de la ruta o aplicar diseño al
polilínea de ruta para la ruta de un viaje en el mapa. El SDK crea un
un objeto google.maps.Polyline
por cada par de coordenadas en la ruta del viaje
la ruta de acceso activa o restante. Luego, la biblioteca aplica esas personalizaciones
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
Así como puedes aplicar ajustes de diseño a los marcadores, debes aplicar ajustes de diseño a las polilíneas de rutas parámetros de personalización. Desde allí, configurarás el estilo con una de las los siguientes enfoques:
- El más simple: usa
PolylineOptions
para aplicar a todos los coinciden con los objetosPolyline
cuando se crean o actualizan. - Avanzado: Especifica una función de personalización.
Las funciones de personalización permiten aplicar estilos individuales a los objetos según
que envió Fleet Engine. La función puede cambiar el estilo de cada
basado en el estado actual del recorrido; por ejemplo, colorear el
Polyline
tiene una sombra más profunda o lo hace más grueso cuando el vehículo está en marcha se mueve más lento. Incluso puedes unirte desde fuentes fuera de Fleet Engine y definir el diseño del objetoPolyline
según esa información.
Parámetros de personalización
Al definir el diseño de polilíneas de rutas, se usan los parámetros proporcionados en
FleetEngineShipmentLocationProviderOptions
Estos parámetros proporcionan
estados de ruta diferentes en el viaje del vehículo, de la siguiente manera:
- Rutas ya recorridas: Usa
takenPolylineCustomization
. - Ruta recorrida activamente: Usa
activePolylineCustomization
. - Ruta aún no viajada: 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 estilo 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 una ruta activa
polilínea. Sigue este patrón para personalizar el estilo de cualquier objeto Polyline
.
usando cualquiera de los parámetros de personalización de polilíneas de rutas que se mencionaron anteriormente
JavaScript
// 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'});
}
}
};
TypeScript
// 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'});
}
}
};
Cómo controlar la visibilidad de la polilínea de la ruta
De forma predeterminada, todos los objetos Polyline
son visibles. Sigue estos pasos para crear un objeto Polyline
:
invisible, establece su propiedad visible
:
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};