Personnaliser les polylignes d'itinéraire

Sélectionnez une plate-forme : Android iOS JavaScript

Vous personnalisez les polylignes de parcours à l'aide de la méthode ConsumerMapStyle.setPolylineStyleOptions. 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 l'PolylineOptions actif, utilisez la méthode getPolylineStyleOptions.

Pour en savoir plus, consultez les sections sur ConsumerMapStyle.setPolylineStyleOptions

Types de polylignes d'itinéraire

Vous pouvez personnaliser les types de polylignes de parcours 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 de la polyligne de routage

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

  • Pour compiler 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é, il vous suffit de spécifier des valeurs personnalisées.

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

Pour en savoir plus, consultez la section PolylineOptions dans la documentation destinée aux 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 de l'utilisateur à l'aide de polylignes pour afficher l'itinéraire actif et restant de votre véhicule.

  • L'itinéraire actif correspond au parcours que le véhicule doit désormais parcourir pour atteindre le point de cheminement suivant dans le trajet actif du consommateur.

  • L'itinéraire restant correspond au parcours que le véhicule doit encore parcourir après l'itinéraire actif. Lorsque le point de cheminement de l'itinéraire actif est le dernier point de cheminement du trajet, le reste de l'itinéraire 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 et le reste de l'itinéraire ne l'est pas.

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

Le calque de trafic de la polyligne est désactivé 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 portions de trafic anormal. Elle inclut un décalage en fonction des conditions du trafic. Pour en savoir plus, consultez la documentation destinée aux développeurs Android concernant la polyligne.

Google Maps représente les conditions de circulation à l'aide de l'un des quatre types de vitesses. Vous pouvez personnaliser la couleur pour 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.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)