Personnaliser les repères

Sélectionnez une plate-forme : Android iOS JavaScript

Personnalisez l'apparence des repères ajoutés à la carte. Vous pouvez personnaliser l'apparence des repères ajoutés à la carte de deux manières :

  1. Styliser les repères en fonction du type : spécifiez un objet MarkerOptions pour styliser les 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, en remplaçant les options par défaut. Pour obtenir des exemples, consultez la section Modifier le style des repères à l'aide de MarkerOptions dans ce guide.

  2. Styliser les repères en fonction des données : spécifiez une fonction de personnalisation pour styliser les repères en fonction des données. Vous pouvez appliquer un style en fonction des données de partage de trajet ou de sources externes :

    • Données issues du partage de trajet : le partage de trajet transmet les données des repères à la fonction de personnalisation, y compris le type d'objet que le repère représente (véhicule, point de départ, point de passage ou destination). Le style du repère change alors en fonction de l'état actuel de l'élément de repère. Par exemple, le nombre de waypoints restants avant que le véhicule ne termine le trajet.

    • Sources externes : vous pouvez combiner les données de partage de trajet avec des données provenant de sources externes à Fleet Engine et styliser le repère en fonction de ces informations.

    Pour obtenir des exemples, consultez Modifier le style des repères à l'aide de fonctions de personnalisation dans ce guide.

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

Options de personnalisation des repères

Les deux options utilisent les paramètres de personnalisation suivants dans l'API Maps JavaScript de Google sous FleetEngineTripLocationProviderOptions :

Modifier le style des repères à l'aide de MarkerOptions

L'exemple suivant montre comment configurer le style du 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 des options de personnalisation listées dans Options de personnalisation des repères.

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

Modifier le style des repères à l'aide de fonctions de personnalisation

L'exemple suivant montre comment configurer le style des repères de véhicules à l'aide de fonctions de personnalisation. Suivez ce modèle pour personnaliser le style de n'importe quel repère à l'aide des paramètres de personnalisation des repères listés dans Options de personnalisation des repères.

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

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'un des paramètres de personnalisation des repères listés dans Options de personnalisation des repères.

JavaScript

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

TypeScript

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

Étape suivante