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. Styler 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, 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. Styler 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 du partage de parcours ou de sources externes:

    • Données du partage de trajet: 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, origine, 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'à ce que le véhicule termine le trajet.

    • 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 de 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 de véhicule à 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