En este documento, se explica cómo personalizar el aspecto de las rutas con seguimiento
vehículos en un mapa. Las rutas se dibujan en un mapa en polilíneas. Por cada par de
coordenadas en la ruta activa o restante de un vehículo, la biblioteca crea una
objeto google.maps.Polyline
.
Puedes aplicar diseño a los objetos Polyline
especificando personalizaciones de polilíneas que
la biblioteca se aplica en dos situaciones:
- Antes de agregar los objetos al mapa
- Cuando los datos usados para los objetos cambiaron
Aplica diseño a polilíneas
Así como puedes personalizar marcadores, puedes aplicar diseño a las polilíneas de rutas en maneras diferentes:
Aplicar diseño de polilíneas de rutas por tipo: Usa
PolylineOptions
para aplicar a todos los objetosPolyline
coincidentes cuando se crearse o actualizarse. Para ver un ejemplo, consulta Cómo aplicar diseño a polilíneas por tipo.Diseño de polilíneas de rutas basadas en datos: Especifica una función de personalización. en función de los datos del seguimiento de la flota o de fuentes externas:
Datos de seguimiento de flotas: El seguimiento de flota pasa datos de polilínea a la función de personalización, incluidos los datos del vehículo actual para cada estado. Puedes aplicar diseño a las polilíneas en función de estos datos, incluso el color el objeto
Polyline
con un tono más profundo o hacerlo más grueso cuando la el vehículo se mueve más lento.Fuentes externas: Puedes combinar los datos de seguimiento de la flota con datos de fuentes fuera de Fleet Engine y aplicar diseño al objeto
Polyline
en función de ellas información.
Para ver un ejemplo, consulta Cómo aplicar diseño a polilíneas en función de los datos.
Controla la visibilidad de las polilíneas de las rutas: Puedes ocultar o mostrar las polilíneas. polilíneas con la propiedad
visible
Para obtener más información, consulta En esta guía, puedes controlar la visibilidad de las polilíneas.Cómo mostrar información adicional de un marcador de ubicación o vehículo: Puedes mostrar información adicional con la propiedad
infowindow
. Para más detallados, consulta Cómo mostrar información adicional de un marcador de ubicación o vehículo en 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
recorrido:
Ruta ya recorrida: Usa
takenPolylineCustomization
. Viajes a pedido, referencia de Tareas programadas.Ruta que viaja activamente: Usa
activePolylineCustomization
. Viajes a pedido, referencia de Tareas programadas.Ruta que aún no se recorrió: Usa
remainingPolylineCustomization
. Viajes a pedido, referencia de Tareas programadas.
Cómo aplicar diseño a polilíneas de rutas por tipo
Para aplicar diseño a polilíneas de rutas por tipo, cambia el diseño de los objetos Polyline
usando 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
Polyline
que use 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 aplicar diseño a polilíneas de rutas 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 estilo de
cualquier objeto Polyline
que use cualquiera de los parámetros de personalización de polilíneas enumerados
Consulta las Opciones de personalización de polilíneas en esta guía.
Ejemplo de viajes a pedido
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 devuelve datos de velocidad de tráfico para las rutas activas y restantes para
el vehículo que sigues. Puedes usar esta información para diseñar el Polyline
de acuerdo con su velocidad 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. Sigue estos pasos para crear un objeto Polyline
:
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 marcador de ubicación o vehículo
Puedes usar un objeto InfoWindow
para mostrar información adicional sobre un
un marcador de vehículo o de ubicación.
En el siguiente ejemplo, se muestra cómo crear un 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();