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 consommateurs.

Le SDK JavaScript Consumer 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 grand public applique ensuite le style avant d'ajouter les repères à la carte et lorsque les données ont été utilisées pour les repères ont changé.
  • Plus avancé: spécifiez une fonction de personnalisation. Fonctions de personnalisation permettent de styliser les repères en fonction des données et d'ajouter avec les repères, comme la gestion des clics. Plus précisément, le consommateur Le SDK transmet à la fonction de personnalisation des données sur le type d'objet Le repère représente le véhicule ou la destination. Cela permet ensuite de styliser les repères pour changer en fonction de l'état actuel de l'élément de repère lui-même. pour (par exemple, le nombre d'arrêts prévus restant jusqu'à la destination). Toi Vous pouvez même effectuer une jointure avec des données provenant de sources externes à Fleet Engine et appliquer 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 une 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é: utilisation d'une fonction de personnalisation

L'exemple suivant montre comment configurer le style d'un repère de véhicule pour : d'afficher le nombre d'arrêts restants pour le véhicule avant d'atteindre l'arrêt pour 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 une d'un véhicule ou d'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