Personaliza los marcadores

En este documento, se explica cómo personalizar los marcadores de ubicación y vehículo en el mapa que utilizas en tu app de seguimiento de envíos basada en la Web para consumidores.

Con el SDK de consumidor de JavaScript, puedes personalizar el aspecto de dos tipos de marcadores agregados al mapa:

Puedes hacerlo de dos maneras:

  • El más simple: especifica un objeto MarkerOptions para aplicarlo a todos los marcadores. del mismo tipo. El SDK del consumidor aplica el estilo en dos antes de agregar los marcadores al mapa y cuándo se usaron los datos de los marcadores han cambiado.
  • Más avanzada: Especifica una función de personalización. Funciones de personalización permiten definir el estilo de los marcadores según los datos, además de agregar interactividad con marcadores, como el manejo de clics. Específicamente, el consumidor El SDK pasa datos a la función de personalización sobre el tipo de objeto que el marcador representa: un vehículo o un destino. Esto permite aplicar ajustes de diseño a los marcadores para cambiar según el estado actual del elemento del marcador. para ejemplo, la cantidad de paradas planificadas que faltan hasta el destino. Tú puede incluso unirse a datos de fuentes fuera de Fleet Engine y diseñar el marcador en función de 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 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 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 un marcador de vehículo o de ubicación. En el siguiente ejemplo, se crea InfoWindow y 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();

¿Qué sigue?