Personnaliser les repères

Ce document explique comment personnaliser les repères de véhicule et de lieu sur la carte que vous utilisez pour votre application Web de suivi des expéditions destinée aux consommateurs.

Avec le SDK JavaScript Consumer, vous pouvez personnaliser l'apparence de deux types de repères ajoutés à la carte :

Vous pouvez procéder de deux manières :

  • La 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 cas : 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, ainsi que d'ajouter de l'interactivité aux repères, comme la gestion des clics. Plus précisément, le SDK Consumer transmet des données à la fonction de personnalisation concernant le type d'objet que le repère représente : véhicule ou destination. Le style du repère peut alors changer en fonction de l'état actuel de l'élément de repère lui-même, par exemple le nombre d'arrêts prévus restants avant la destination. Vous pouvez même joindre des données provenant de sources externes à Fleet Engine et styliser le 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 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 repère de véhicule ou un repère de position. L'exemple suivant crée une 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