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 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 las polilíneas

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

Con la función para compartir viajes habilitada, 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 ahora recorre el vehículo 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 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 las polilíneas activas y restantes en tu app. De forma predeterminada, la ruta activa es visible, pero el resto no.

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 la habilitas, el procesador dibuja segmentos sobre la polilínea de ruta que representan tramos de tráfico no normal. Incluye un desplazamiento según la condición del tráfico. Consulta la documentación de Android Developers para Polyline y obtener más información.

Los mapas de Google Maps representan las condiciones del tráfico como uno de los cuatro tipos de velocidad. Puedes personalizar el color para 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 a través de 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)