Personaliza las polilíneas de rutas

Selecciona la plataforma: Android iOS JavaScript

Puedes personalizar las polilíneas de rutas con el método ConsumerMapStyle.setPolylineStyleOptions. Si configuras opciones de polilíneas 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 rutas

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

  • 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 la 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". Dado que el método proporciona valores predeterminados para cada propiedad, solo debes especificar los valores personalizados.

  • Para desactivar la polilínea, 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

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

  • La ruta activa es el camino por el que el vehículo se desplaza ahora para llegar al siguiente punto de ruta en el viaje activo del consumidor.

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

Puedes personalizar y controlar la visibilidad de las polilíneas activas 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 que tienen en cuenta el tráfico

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

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

Para habilitar las polilíneas que tienen en cuenta el tráfico, construye un objeto TrafficStyle y, luego, pásalo a ConsumerMapStyle llamando a setPolylineTrafficStyle().

Ejemplo

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)