Personaliza las polilíneas de rutas

Selecciona la plataforma: Android iOS JavaScript

Las polilíneas de ruta se personalizan con el método ConsumerMapStyle.setPolylineStyleOptions. Si configuras opciones de polilíneas personalizadas, se anularán los valores predeterminados que proporciona el SDK para el consumidor.

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 las polilíneas 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 la polilínea, configura visible como 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 restante de tu vehículo.

  • La ruta activa es el camino que el vehículo está recorriendo 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 de la ruta activa es el último punto de ruta 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 que tienen en cuenta el tráfico

La capa de tráfico de la 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 para desarrolladores de Android sobre polilíneas 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)