Personnaliser les repères

La bibliothèque JavaScript Fleet Tracking vous permet de personnaliser l'apparence des repères ajoutés à la carte. Pour ce faire, vous devez spécifier des personnalisations de repères. La bibliothèque Fleet Tracking les applique ensuite avant d'ajouter des repères à la carte et à chaque mise à jour de repère. Vous pouvez personnaliser l'apparence des repères de différentes manières :

  1. Appliquer un style aux repères en fonction de leur type : spécifiez un MarkerOptions objet pour appliquer un style aux repères du même type. Les modifications que vous spécifiez sont ensuite appliquées après la création de chaque repère, ce qui remplace toutes les options par défaut. Pour obtenir des exemples, consultez Appliquer un style aux repères en fonction de leur type dans ce guide.

  2. Appliquer un style aux repères en fonction des données : spécifiez une fonction de personnalisation basée sur les données et ajoutez de l'interactivité aux repères, par exemple en gérant les clics. Vous pouvez appliquer un style en fonction des données de Fleet Tracking ou de sources externes :

    • Données de Fleet Tracking : Fleet Tracking transmet des données à la fonction de personnalisation, y compris le type d'objet que le repère représente : véhicule, arrêt ou tâche. Le style du repère change ensuite en fonction de l'état actuel de l'élément de repère. Par exemple, le nombre d'arrêts restants ou le type de tâche.

    • Sources externes : vous pouvez combiner les données de Fleet Tracking avec des données provenant de sources externes à Fleet Engine et appliquer un style au repère en fonction de ces informations.

    Pour obtenir des exemples, consultez Appliquer un style aux repères en fonction des données.

  3. Ajouter la gestion des clics aux repères : pour obtenir des exemples, consultez Ajouter la gestion des clics.

  4. Filtrer les repères visibles : filtrez les repères qui s'affichent à l'aide des fonctionnalités de filtrage disponibles dans le fournisseur de localisation JavaScript. Exemple :

  5. Utiliser la personnalisation des repères pour suivre un véhicule de livraison de tâches planifiées: vous pouvez personnaliser les repères pour suivre les véhicules. Pour en savoir plus, consultez Utiliser la personnalisation des repères pour suivre un véhicule de livraison.

Options de personnalisation des repères

La bibliothèque Fleet Tracking fournit les paramètres de personnalisation suivants :

Paramètres de personnalisation des trajets à la demande

Paramètres de personnalisation des tâches planifiées

Appliquer un style aux repères en fonction de leur type

L'exemple suivant montre comment configurer le style d'un repère de véhicule avec un objet MarkerOptions. Suivez ce modèle pour personnaliser le style de n'importe quel repère à l'aide de l'une des options listées dans Options de personnalisation des repères.

Exemple de trajets à la demande

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

Exemple de tâches planifiées

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Appliquer un style aux repères en fonction des données

L'exemple suivant montre comment configurer le style d'un repère de véhicule à l'aide de fonctions de personnalisation. Suivez ce modèle pour personnaliser le style de n'importe quel repère en fonction des données à l'aide de l'une des options listées dans Options de personnalisation des repères ci-dessus.

Exemple de trajets à la demande

JavaScript

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

Exemple de tâches planifiées

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

Ajouter la gestion des clics aux repères

L'exemple suivant montre comment ajouter la gestion des clics à un repère de véhicule. Suivez ce modèle pour ajouter la gestion des clics à n'importe quel repère à l'aide de l'une des options listées dans Options de personnalisation des repères ci-dessus.

Exemple de trajets à la demande

JavaScript

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

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

Exemple de tâches planifiées

JavaScript

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

TypeScript

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

Filtrer les repères visibles

Si vous devez utiliser setVisible, suivez ce modèle pour filtrer n'importe quel repère à l'aide de l'une des options listées dans Options de personnalisation des repères ci-dessus.

Exemple de trajets à la demande

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

Exemple de tâches planifiées

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

Étape suivante