Personnaliser les repères

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 de leur type : spécifiez un MarkerOptions objet 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, ce qui remplace toutes les options par défaut. Pour consulter des exemples, reportez-vous à 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 styliser les repères en fonction des données de partage de trajet ou de sources externes :

   • Données de partage de trajet : le partage de trajet transmet les données de repère à la fonction de personnalisation, y compris le type d'objet que le repère représente : véhicule, origine, point de repère 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 repère 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 consulter des exemples, reportez-vous à la section Modifier le style des repères à l'aide de fonctions de personnalisation dans ce guide.

3. Ajouter une gestion des clics aux repères : pour consulter des exemples, reportez-vous à la section Ajouter une 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 :

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

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 Options de personnalisation des repères.

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

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

Ajouter une gestion des clics aux repères

L'exemple suivant montre comment ajouter une gestion des clics à un repère de véhicule. Suivez ce modèle pour ajouter une gestion des clics à n'importe quel repère à l'aide de l'un des paramètres de personnalisation de repère listés dans Options de personnalisation des repères.

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

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

Étape suivante

• Personnaliser les polylignes d'itinéraire