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 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 ». Puisque la méthode fournit des valeurs par défaut pour chaque propriété, il vous suffit de spécifier les valeurs personnalisées.

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

Pour plus de détails, voir PolylineOptions dans la documentation pour 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 de l'utilisateur en utilisant des 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 passage de l'itinéraire actif est le dernier point de passage 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 et l'itinéraire restant 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

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 anormal. Il comprend un décalage en fonction des conditions de circulation. Consultez la documentation pour développeurs Android concernant Polyline pour plus d'informations.

Google Maps représente les conditions de circulation selon l'un des quatre types de vitesse. Vous pouvez personnaliser la couleur pour chaque type de vitesse.

Pour activer les polylignes sensibles au trafic, construisez 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)