Personnaliser les repères

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

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

Pour ce faire, procédez de l'une des manières suivantes:

  • 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, 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 sur le type d'objet représenté par le repère: véhicule ou destination. Cela permet ensuite de modifier le style des repères 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 effectuer une jointure avec 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%.

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 géographique. 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