Personnaliser les polylignes d'itinéraire

Sélectionnez une plate-forme : Android iOS JavaScript

Vous personnalisez les polylignes d'itinéraire à 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 le 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 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 de la polyligne de l'itinéraire

Google Maps fournit des propriétés personnalisables 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)

Route active et restante

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 pour votre véhicule.

  • La route active correspond au trajet que le véhicule emprunte actuellement pour atteindre le prochain point de repère du trajet actif du consommateur.

  • La route restante correspond au trajet que le véhicule doit encore parcourir au-delà de la route active. Lorsque le point de cheminement de l'itinéraire actif est le dernier point de cheminement 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 de l'itinéraire, qui représentent des tronçons de trafic non normal. Il inclut un décalage en fonction de l'état du trafic. Pour en savoir plus, consultez la documentation Android Developer sur Polyline.

Google Maps représente les conditions de circulation sous la forme de l'un des 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)