Personnaliser les repères

Sélectionnez une plate-forme : Android iOS JavaScript

Personnalisez l'apparence des repères ajoutés à la carte. Personnaliser l'apparence et l'apparence des repères ajoutés à la carte de deux manières:

  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 sont puis appliqué après la création de chaque repère, en écrasant les options par défaut. Pour obtenir des exemples, consultez Modifiez le style des repères à l'aide de MarkerOptions dans cette .

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

    • Données du partage du trajet: le partage du trajet transmet les données des repères à fonction de personnalisation incluant le type d'objet représenté par le repère: le véhicule, l'origine, le point de cheminement ou la destination. 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 de points de cheminement restants jusqu'à la fin du trajet.

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

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

  3. Ajouter la gestion des clics aux repères: par exemple, consultez Ajouter la gestion des clics.

Options de personnalisation des repères

Ces deux options utilisent les paramètres de personnalisation suivants dans l'API API 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 le repère en utilisant l'une des personnalisations 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 du véhicule à l'aide de des fonctions de personnalisation. Suivez ce modèle pour personnaliser le style en utilisant l'un des paramètres de personnalisation des repères répertorié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 cette procédure pour ajouter la gestion des clics à n'importe quel repère utilisant l'un de ces repères. les paramètres de personnalisation répertorié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