Con la biblioteca de seguimiento de flotas de JavaScript, puedes personalizar el aspecto de los marcadores que se agregan al mapa. Para ello, especifica las personalizaciones de los marcadores, que la biblioteca de seguimiento de flotas aplica antes de agregar marcadores al mapa y con cada actualización de marcador. Puedes personalizar el aspecto de los marcadores de las siguientes maneras:
Marcadores de diseño basados en el tipo: Especifica un objeto
MarkerOptionspara aplicar diseño a marcadores del mismo tipo. Los cambios que especifiques se aplicarán después de que se cree cada marcador y se reemplazarán las opciones predeterminadas. Para ver ejemplos, consulta Marcadores de estilo basados en el tipo en esta guía.Aplicar diseño a marcadores según los datos: Especifica una función de personalización basada en datos y agrega interactividad a los marcadores, como el manejo de clics. Puedes aplicar diseño según los datos del seguimiento de flotas o de fuentes externas:
Datos del seguimiento de flota: El seguimiento de flota pasa datos a la función de personalización, incluido el tipo de objeto que representa el marcador: vehículo, parada o tarea. Luego, el diseño del marcador cambia según el estado actual del elemento del marcador. Por ejemplo, la cantidad de paradas restantes o el tipo de tarea.
Fuentes externas: Puedes combinar los datos de seguimiento de flotas con datos de fuentes externas de Fleet Engine y aplicar diseño al marcador según esa información.
Para ver ejemplos, consulta Marcadores de diseño basados en datos.
Agrega el control de clics a los marcadores: Para ver ejemplos, consulta Agrega el control de clics.
Filtra qué marcadores son visibles: Filtra qué marcadores aparecen con las capacidades de filtrado disponibles en el proveedor de ubicación de JavaScript. Por ejemplo:
Usa la personalización de marcadores para hacer un seguimiento de un vehículo de entrega de tareas programadas: Puedes personalizar los marcadores para hacer un seguimiento de los vehículos. Para obtener más información, consulta Cómo usar la personalización de marcadores para hacer un seguimiento de un vehículo de entrega.
Opciones de personalización de marcadores
La biblioteca de seguimiento de flotas proporciona los siguientes parámetros de personalización:
Parámetros de personalización de viajes a pedido
Parámetros de personalización de tareas programadas
Aplica diseño a los marcadores según el tipo
En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo con un objeto MarkerOptions. Sigue este patrón para personalizar el diseño de cualquier marcador con cualquiera de las opciones que se indican en Opciones de personalización de marcadores.
Ejemplo de viajes bajo demanda
JavaScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
vehicleMarkerCustomization = {
cursor: 'grab'
};
Ejemplo de tareas programadas
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
Aplica diseño a los marcadores según los datos
En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo con funciones de personalización. Sigue este patrón para personalizar el diseño de cualquier marcador según los datos con cualquiera de las opciones que se indican en Opciones de personalización de marcadores.
Ejemplo de viajes bajo demanda
JavaScript
vehicleMarkerCustomization =
(params) => {
const remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
Ejemplo de tareas programadas
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
params.marker.setLabel(`${stopsLeft}`);
};
Agrega el control de clics a los marcadores
En el siguiente ejemplo, se muestra cómo agregar el control de clics a un marcador de vehículo. Sigue este patrón para agregar el control de clics a cualquier marcador con cualquiera de las opciones que se enumeran en Opciones de personalización de marcadores.
Ejemplo de viajes bajo demanda
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Ejemplo de tareas programadas
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform chosen action.
});
}
};
Filtra qué marcadores son visibles
Si necesitas usar setVisible, sigue este patrón para filtrar cualquier marcador
con cualquiera de las opciones que se indican en Opciones de personalización de marcadores más arriba.
Ejemplo de viajes bajo demanda
JavaScript
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
TypeScript
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
Ejemplo de tareas programadas
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
if (stopsLeft > 10) {
params.marker.setVisible(false);
}
};