En este documento, se explica cómo personalizar los marcadores de vehículos y ubicaciones en el mapa que usas para tu app de seguimiento de envíos web para consumidores.
Con el SDK de consumidor de JavaScript, puedes personalizar el aspecto de dos tipos de marcadores agregados al mapa:
- Marcadores de vehículos de entrega: usa
deliveryVehicleMarkerCustomization
. - Marcadores de destino: Usa
destinationMarkerCustomization
.
Puedes hacerlo de dos maneras:
- El más simple: Especifica un objeto
MarkerOptions
para aplicar a todos los marcadores del mismo tipo. Luego, el SDK de consumidor aplica el diseño en dos situaciones: antes de agregar los marcadores al mapa y cuando cambian los datos que se usaron para ellos. - Más avanzada: Especifica una función de personalización. Las funciones de personalización permiten aplicar diseño a los marcadores según los datos, así como agregar interactividad a los marcadores, como el manejo de clics. Específicamente, el SDK para consumidores pasa datos a la función de personalización sobre el tipo de objeto que representa el marcador: vehículo o destino. De esta manera, el diseño del marcador puede cambiar en función del estado actual del elemento del marcador (por ejemplo, la cantidad de paradas planificadas que faltan hasta el destino). Incluso puedes unir datos de fuentes externas a Fleet Engine y aplicar diseño al marcador según esa información.
Ejemplo simple: usa MarkerOptions
En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo con un objeto MarkerOptions
. En este ejemplo, se establece la opacidad del marcador en un 50%.
JavaScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
TypeScript
deliveryVehicleMarkerCustomization = {
opacity: 0.5
};
Ejemplo avanzado: usa una función de personalización
En el siguiente ejemplo, se muestra cómo configurar el diseño de un marcador de vehículo para mostrar el recuento de paradas restantes del vehículo antes de llegar a la parada de la tarea programada.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
Cómo agregar control de clics a los marcadores
Puedes agregar el control de clics a cualquier marcador, como en el siguiente ejemplo para un marcador de vehículo.
JavaScript
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
Cómo mostrar información adicional sobre los marcadores
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 crea un InfoWindow
y se lo adjunta a un marcador de vehículo:
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 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});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 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();