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

  2. Appliquer un style aux repères en fonction des données: spécifiez une fonction de personnalisation pour appliquer un style aux repères en fonction des données. Vous pouvez appliquer un style en fonction des données du partage de parcours ou de sources externes :

    • Données issues du partage de trajets : le partage de trajet transmet les données du repère à la fonction de personnalisation, y compris le type d'objet représenté par le repère (véhicule, point de départ, point de cheminement ou destination). Le style du repère change ensuite en fonction de l'état actuel de l'élément de repère. Par exemple, le nombre de points de cheminement restants jusqu'à la fin du trajet du véhicule.

    • Sources externes : vous pouvez combiner les données de partage de trajets 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 la section Modifier le style des repères à l'aide des fonctions de personnalisation de 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 Google Maps JavaScript sous FleetEngineTripLocationProviderOptions :

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

L'exemple suivant montre comment configurer le style des repères 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 personnalisations de repère listées dans la section 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 des véhicules à l'aide de fonctions de personnalisation. Suivez ce modèle pour personnaliser le style de n'importe quel repère à l'aide de l'un des paramètres de personnalisation des repères listés dans la section 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 à un repère à l'aide de l'un des paramètres de personnalisation des repères listés dans la section 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