En este documento, se explica cómo personalizar el aspecto de las rutas para vehículos rastreados en un mapa. Las rutas se dibujan en un mapa en polilíneas. Para cada par de coordenadas en la ruta activa o restante de un vehículo, la biblioteca crea un objeto google.maps.Polyline
.
Para aplicar diseño a los objetos Polyline
, especifica personalizaciones de polilíneas que la biblioteca aplicará en dos situaciones:
- Antes de agregar los objetos al mapa
- Cuando cambian los datos que se usan para los objetos
Aplica 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:
Aplicar diseño de polilíneas de rutas por tipo: Usa
PolylineOptions
para aplicar el diseño a todos los objetosPolyline
coincidentes cuando se creen o actualicen. Para ver un ejemplo, consulta Cómo aplicar diseño a polilíneas por tipo.Diseño de polilíneas de rutas en función de los datos: Especifica una función de personalización basada en los datos del seguimiento de flotas o de fuentes externas:
Datos del seguimiento de flota: El seguimiento de flota pasa datos de polilínea 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, lo que incluye colorear el objeto
Polyline
con un tono más oscuro o hacerlo más grueso cuando el vehículo se mueve más lento.Fuentes externas: Puedes combinar los datos de seguimiento de flotas con datos de fuentes fuera de Fleet Engine y aplicar diseño al objeto
Polyline
según esa información.
Para ver un ejemplo, consulta Cómo aplicar diseño a polilíneas según los datos.
Controla la visibilidad de los polilíneas de ruta: Puedes ocultar o mostrar los polilíneas con la propiedad
visible
. Para obtener más información, consulta Cómo controlar la visibilidad de las polilíneas en esta guía.Muestra información adicional para un vehículo o un marcador de ubicación: Puedes mostrar información adicional con la propiedad
infowindow
. Para obtener más información, consulta Cómo mostrar información adicional de un vehículo o marcador de 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 del recorrido en el recorrido del vehículo:
Ruta ya recorrida: Consulta la referencia Tareas programadas de
takenPolylineCustomization
- Viajes a pedido.Ruta de viaje activa: Consulta la referencia
activePolylineCustomization
- Viajes a pedido, Tareas programadas.Ruta que aún no se ha recorrido: Usa
remainingPolylineCustomization
. Consulta Viajes a pedido y Tareas programadas.
Cómo aplicar diseño a polilíneas de rutas 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 objeto Polyline
con cualquiera de las personalizaciones de polilíneas de rutas que se mencionan en Opciones de personalización de polilíneas en esta guía.
Ejemplo de viajes a pedido o tareas programadas
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
Cómo aplicar diseño a polilíneas de rutas con datos
Para definir el diseño de polilíneas de rutas con datos, cambia el diseño de los objetos Polyline
con las 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 objeto Polyline
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 adaptado al tráfico (solo viajes a pedido)
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 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'});
}
}
};
Controla la visibilidad de los polilíneas
De forma predeterminada, todos los objetos Polyline
son visibles. Para hacer que un objeto Polyline
sea invisible, establece su propiedad visible
en false
.
Ejemplo de viajes a pedido o tareas programadas
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};
Cómo mostrar una ventana de información para un vehículo o un marcador de ubicación
Puedes usar un objeto InfoWindow
para mostrar información adicional sobre un marcador de ubicación o de vehículo.
En el siguiente ejemplo, se muestra cómo crear un objeto InfoWindow
y adjuntarlo a un marcador de vehículo.
Ejemplo de viajes a pedido
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();