Personnaliser les repères

Avec la bibliothèque JavaScript de suivi du parc, vous pouvez personnaliser l'apparence de repères ajoutés à la carte. Pour ce faire, vous devez spécifier des personnalisations de repère, que la bibliothèque de suivi de la flotte applique ensuite avant d'ajouter des repères à la carte et à chaque mise à jour des repères. Vous pouvez personnaliser l'apparence des repères dans comme suit:

  1. Appliquer un style aux repères en fonction du type: spécifiez un MarkerOptions pour appliquer un style aux repères du même type. Les modifications que vous spécifiez appliquée après la création de chaque repère, et remplace les options par défaut. Pour exemples, consultez Appliquer un style aux repères en fonction du 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 et ajouter de l'interactivité aux repères (par exemple, la gestion des clics). Vous pouvez appliquer un style en fonction des données issues du suivi du parc ou de sources externes:

    • Données de suivi du parc: le suivi de flotte transmet les données au fonction de personnalisation incluant le type d'objet du repère représente: véhicule, arrêt ou tâche. Le style des repères est ensuite modifié en fonction de l'état actuel de l'élément de repère. Par exemple, le nombre des arrêts restants ou le type de tâche.

    • Sources externes: vous pouvez combiner les données de suivi du parc avec les données des sources externes à Fleet Engine et appliquez un style au repère des 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, reportez-vous à l'article Ajoutez la gestion des clics.

  4. Filtrer les repères visibles: filtrez les repères à afficher. avec les fonctionnalités de filtrage disponibles à l'emplacement JavaScript d'un fournisseur de services agréé. 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 la section Utiliser Personnalisation des repères pour suivre un véhicule de livraison

Options de personnalisation des repères

La bibliothèque de suivi du parc 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 en utilisant l'une des options 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 des fonctions de personnalisation. Suivez ce modèle pour personnaliser le style en fonction des données, en utilisant l'une des options indiquées dans Options de personnalisation des repères listées 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. Procédez comme suit pour ajouter la gestion des clics à n'importe quel repère utilisant l'une des consultez la section 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 schéma pour filtrer les repères à l'aide des options de la section 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