Personaliza los marcadores

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 basada en la Web para los consumidores.

Con el SDK de JavaScript Consumer, puedes personalizar el aspecto de dos tipos de marcadores que se agregan al mapa:

Puedes hacerlo de una de las siguientes dos maneras:

  • Más simple: Especifica un objeto MarkerOptions para aplicar a todos los marcadores del mismo tipo. Luego, el SDK para el consumidor aplica el diseño en dos situaciones: antes de agregar los marcadores al mapa y cuando cambian los datos que se usan para los marcadores.
  • Más avanzado: Especifica una función de personalización. Las funciones de personalización permiten aplicar un diseño a los marcadores según los datos, así como agregar interactividad a los marcadores, como el control de clics. Específicamente, el SDK de Consumer pasa datos a la función de personalización sobre el tipo de objeto que representa el marcador: vehículo o destino. Esto permite que el diseño del marcador cambie según el estado actual del elemento del marcador, por ejemplo, la cantidad de paradas planificadas que quedan hasta el destino. Incluso puedes unir datos de fuentes externas a Fleet Engine y aplicar un 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 el 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.
      });
    }
  };

Muestra información adicional de los marcadores

Puedes usar un InfoWindow para mostrar información adicional sobre un marcador de vehículo o de ubicación. En el siguiente ejemplo, se crea un objeto InfoWindow y se 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();

¿Qué sigue?