Personaliza las polilíneas de rutas

Selecciona la plataforma: Android iOS JavaScript

Puedes personalizar las polilíneas de rutas con el ConsumerMapStyle.setPolylineStyleOptions. Si configuras una polilínea personalizada estas anulan los valores predeterminados que proporciona el SDK del consumidor.

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

Para recuperar el PolylineOptions, usa 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

Se muestran ACTIVE_ROUTE y REMAINING_ROUTE durante el recorrido compartido 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 “Establecedor”. métodos de estilo. Desde el método proporciona valores predeterminados para cada propiedad, solo necesitas para especificar cualquier valor personalizado.

• 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 la función para compartir recorridos habilitada, tu app puede personalizar la la experiencia del usuario con polilíneas para mostrar los elementos activos y restantes para tu vehículo.

• La ruta activa es el camino por el que el vehículo está avanzando para llegar. el próximo punto de referencia en el viaje activo del consumidor.

• La ruta restante es el recorrido que el vehículo aún debe recorrer la ruta activa. Cuando el punto de referencia de ruta activo es el último punto de referencia de 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 se muestra no es visible.

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 de la polilínea está inhabilitada de forma predeterminada. Cuando la habilitas, el renderizador dibuja segmentos sobre la polilínea de ruta que representan tramos de cuando el tráfico no es normal. Incluye un desplazamiento según la condición del tráfico. Para obtener más información, consulta la documentación para desarrolladores de Android de Polyline.

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

Para habilitar las polilíneas adaptadas al tráfico, construye un objeto TrafficStyle y, luego, pásalo a ConsumerMapStyle llamando a 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)