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 propriété ConsumerMapStyle.setPolylineStyleOptions. Si vous définissez une polyligne personnalisée , elles remplacent les valeurs par défaut fournies par le SDK grand public.

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

Pour récupérer le PolylineOptions actif, utilisez 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 lors du partage du trajet et qui représentent l'itinéraire du véhicule.

Propriétés de la polyligne de routage

Google Maps propose 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 la méthode "Setter". méthodes de style graphique. Depuis fournit des valeurs par défaut pour chaque propriété, vous n'avez besoin pour spécifier des 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 parcours est activé, votre application peut personnaliser les expérience utilisateur qui utilise des polylignes pour afficher les éléments actifs et restants l'itinéraire de votre véhicule.

  • L'itinéraire actif correspond au chemin que le véhicule doit suivre pour atteindre le prochain point de cheminement dans le trajet actif du client.

  • L'itinéraire restant correspond au parcours que le véhicule doit encore parcourir la route active. Lorsque le point de cheminement de l'itinéraire actif est le dernier point de cheminement du trajet, la route restante n'existe pas.

Vous pouvez personnaliser et contrôler la visibilité des polylignes actives et restantes dans votre application. Par défaut, la route active est visible et la route restante n'est pas visible.

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 tronçons un 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 quatre types de vitesse. Vous pouvez personnaliser la couleur pour chaque type de vitesse.

Pour activer les polylignes basées sur le trafic, créez un objet TrafficStyle. puis la transmettre à 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)