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. 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, en écrasant les options par défaut. Pour obtenir des exemples, consultez Modifier le style des repères à l'aide de MarkerOptions dans 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 trajet ou de sources externes :

   • Données issues du partage de trajet : le partage de trajet transmet les données de 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 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 personnalisés suivants dans l'API Maps JavaScript de Google 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 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 des paramètres de personnalisation 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 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.

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