Personnaliser les polylignes d'itinéraire

Sélectionnez une plate-forme : Android iOS JavaScript

Vous pouvez personnaliser les polylignes d'itinéraire à l'aide de la ConsumerMapStyle.setPolylineStyleOptions méthode. Si vous définissez des options de polyligne personnalisées, elles remplacent les valeurs par défaut fournies par le SDK Consumer.

Pour restaurer les valeurs par défaut, appelez setPolylineStyleOptions avec null pour le paramètre PolylineOptions.

Pour récupérer le PolylineOptions actif, utilisez la méthode getPolylineStyleOptions.

Pour en savoir plus, consultez ConsumerMapStyle.setPolylineStyleOptions.

Types de polylignes d'itinéraire

Vous pouvez personnaliser les types de polylignes d'itinéraire suivants :

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE et REMAINING_ROUTE s'affichent lorsque vous suivez un trajet et représentent l'itinéraire du véhicule.

Propriétés des polylignes d'itinéraire

Google Maps fournit des propriétés personnalisables disponibles pour chaque polyligne dans PolylineOptions.

  • Pour créer PolylineOptions, utilisez son constructeur.

  • Pour spécifier des propriétés personnalisées, utilisez des méthodes de style "Setter". Étant donné que la méthode fournit des valeurs par défaut pour chaque propriété, vous n'avez qu'à spécifier les valeurs personnalisées.

  • Pour désactiver la polyligne, définissez visible sur false.

Pour en savoir plus, consultez PolylineOptions dans la documentation pour les développeurs Android.

Exemple

Java

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

Itinéraire actif et restant

Lorsque le partage de trajet est activé, votre application peut personnaliser l'expérience utilisateur à l'aide de polylignes pour afficher l'itinéraire actif et restant de votre véhicule.

  • L'itinéraire actif est le trajet que le véhicule emprunte actuellement pour atteindre le prochain point de repère du trajet actif du consommateur.

  • L'itinéraire restant est le trajet que le véhicule doit encore parcourir après l'itinéraire actif. Lorsque le point de repère de l'itinéraire actif est le dernier point de repère du trajet, l'itinéraire restant n'existe pas.

Vous pouvez personnaliser et contrôler la visibilité des polylignes actives et restantes dans votre application. Par défaut, l'itinéraire actif est visible, mais pas l'itinéraire restant.

Exemple

Java

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

Polylignes tenant compte du trafic

La couche de trafic de la polyligne est désactivée par défaut. Lorsque vous l'activez, le moteur de rendu dessine des segments au-dessus de la polyligne d'itinéraire qui représentent des tronçons de trafic non normal. Il inclut un décalage en fonction des conditions de circulation. Pour en savoir plus, consultez la documentation pour les développeurs Android sur les polylignes.

Google Maps représente les conditions de circulation sous la forme de quatre types de vitesse. Vous pouvez personnaliser la couleur de chaque type de vitesse.

Pour activer les polylignes tenant compte du trafic, créez un objet TrafficStyle puis transmettez-le à ConsumerMapStyle en appelant setPolylineTrafficStyle().

Exemple

Java

// TrafficStyle is part of the Consumer SDK.
int orange = Color.rgb(255, 165, 0);
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW, orange)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val orange = Color.rgb(255, 165, 0)
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GRAY)
    .setTrafficColor(SpeedType.NORMAL, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW, orange)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)