Personaliza las polilíneas de rutas

Selecciona la plataforma: Android iOS JavaScript

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

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 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 los 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 de viajes 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 la ruta que el vehículo recorre para llegar al siguiente punto de referencia en el viaje activo del consumidor.

  • La ruta restante es la ruta que el vehículo aún debe recorrer más allá 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 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 con información del tráfico

La capa de tráfico de la 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 desplazamiento según las condiciones de tráfico. Consulta la documentación para desarrolladores de Android sobre Polyline para obtener más información.

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

Para habilitar las polilíneas con información del 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)