Personaliza las polilíneas de rutas

Selecciona la plataforma: Android iOS JavaScript

Puedes personalizar los polilíneas de ruta con el método ConsumerMapStyle.setPolylineStyleOptions. Si configuras opciones de polilínea personalizadas, estas anularán los valores predeterminados que proporciona el SDK de Consumer.

Para restablecer los valores predeterminados, llama a setPolylineStyleOptions con null para el parámetro PolylineOptions.

Para recuperar el PolylineOptions activo, usa el método getPolylineStyleOptions.

Para obtener más información, consulta ConsumerMapStyle.setPolylineStyleOptions

Tipos de polilíneas de ruta

Puedes personalizar los siguientes tipos de polilíneas de ruta:

• ACTIVE_ROUTE
• REMAINING_ROUTE

ACTIVE_ROUTE y REMAINING_ROUTE se muestran mientras se sigue un viaje y representan la ruta del vehículo.

Propiedades de la polilínea de ruta

Google Maps proporciona propiedades personalizables disponibles para cada polilínea en PolylineOptions.

• Para compilar PolylineOptions, usa su constructor.

• Para especificar propiedades personalizadas, usa métodos de estilo "Setter". Como el método proporciona valores predeterminados para cada propiedad, solo debes especificar los valores personalizados.

• Para desactivar el polilinea, establece visible en false.

Para obtener más detalles, consulta PolylineOptions en la documentación para desarrolladores de Android.

Ejemplo

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)

Ruta activa y restante

Si el uso compartido de viajes está habilitado, tu app puede personalizar la experiencia del usuario con polilíneas para mostrar la ruta activa y restante de tu vehículo.

• La ruta activa es la ruta que el vehículo está recorriendo para llegar al siguiente punto de referencia del viaje activo del consumidor.

• La ruta restante es la ruta que el vehículo aún tiene que recorrer después de la ruta activa. Cuando el punto de referencia de la ruta activa es el último punto de referencia del viaje, la ruta restante no existe.

Puedes personalizar y controlar la visibilidad de los polilíneas activos y restantes en tu app. De forma predeterminada, la ruta activa es visible y la ruta restante no lo es.

Ejemplo

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)

Polilíneas adaptadas al tráfico

La capa de tráfico del polilínea está inhabilitada de forma predeterminada. Cuando lo habilitas, el renderizador dibuja segmentos sobre la polilínea de la ruta que representan tramos de tráfico no normal. Incluye un desfase según la condición del tráfico. Consulta la documentación de Android Developers para Polyline y obtener más información.

Google Maps representa las condiciones del tráfico como uno de los cuatro tipos de velocidad. Puedes personalizar el color de cada tipo de velocidad.

Para habilitar polilíneas que tengan en cuenta el tráfico, construye un objeto TrafficStyle y, luego, llámalo a ConsumerMapStyle para pasarlo a ConsumerMapStyle.setPolylineTrafficStyle()

Ejemplo

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)