Personnaliser les repères

Ce document explique comment personnaliser les repères de véhicule et de position sur la carte que vous utilisez pour votre application Web de suivi des livraisons pour les clients.

Le SDK client JavaScript vous permet de personnaliser l'apparence de deux types de repères ajoutés à la carte:

Pour ce faire, deux possibilités s'offrent à vous:

  • Plus simple: spécifiez un objet MarkerOptions à appliquer à tous les repères du même type. Le SDK Consumer applique ensuite le style dans deux situations : avant d'ajouter les repères à la carte et lorsque les données utilisées pour les repères ont changé.
  • Plus avancé: spécifiez une fonction de personnalisation. Les fonctions de personnalisation permettent de styliser les repères en fonction des données et d'ajouter de l'interactivité aux repères, comme la gestion des clics. Plus précisément, le SDK grand public transmet à la fonction de personnalisation des données sur le type d'objet représenté par le repère: véhicule ou destination. Cela permet ensuite au style du repère de changer en fonction de l'état actuel de l'élément du repère lui-même (par exemple, le nombre d'arrêts prévus restant jusqu'à la destination). Vous pouvez même effectuer une jointure avec des données provenant de sources extérieures à Fleet Engine et appliquer un style au repère en fonction de ces informations.

Exemple simple : utiliser MarkerOptions

L'exemple suivant montre comment configurer le style d'un repère de véhicule avec un objet MarkerOptions. Dans cet exemple, l'opacité du repère est définie sur 50%.

JavaScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

TypeScript

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

Exemple avancé : utiliser une fonction de personnalisation

L'exemple suivant montre comment configurer le style d'un repère de véhicule pour afficher le nombre d'arrêts restants du véhicule avant d'atteindre l'arrêt de la tâche planifiée.

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}`);
  };

Ajouter la gestion des clics aux repères

Vous pouvez ajouter la gestion des clics à n'importe quel repère, comme dans l'exemple suivant pour un repère de véhicule.

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.
      });
    }
  };

Afficher des informations supplémentaires pour les repères

Vous pouvez utiliser un InfoWindow pour afficher des informations supplémentaires sur un véhicule ou un repère de position. L'exemple suivant crée un InfoWindow et l'associe à un repère de véhicule :

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();

Étape suivante