Personnaliser les repères

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

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

• Repères de véhicules de livraison : utilisez deliveryVehicleMarkerCustomization.
• Repères de destination : utilisez destinationMarkerCustomization

Pour cela, deux possibilités s'offrent à vous :

• Le 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 Consumer transmet des données à la fonction de personnalisation concernant le type d'objet que le repère représente : véhicule ou destination. Cela permet ensuite de modifier le style du repère 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 jusqu'à 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. Cet exemple définit l'opacité du repère sur 50 %.

deliveryVehicleMarkerCustomization = {
  opacity: 0.5
};

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.

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

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.

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

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 de lieu. L'exemple suivant crée un InfoWindow et l'associe à un repère de véhicule :

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

// 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

• Personnaliser les polylignes