Personalizar polilinhas do trajeto

Selecione a plataforma: Android iOS JavaScript

Você personaliza as polilinhas de rotas usando o método ConsumerMapStyle.setPolylineStyleOptions. Se você definir opções de polilinha personalizadas, elas vão substituir os valores padrão fornecidos pelo SDK Consumer.

Para restaurar os valores padrão, chame setPolylineStyleOptions com null para o parâmetro PolylineOptions.

Para recuperar o PolylineOptions ativo, use o método getPolylineStyleOptions.

Para saber mais, consulte ConsumerMapStyle.setPolylineStyleOptions.

Tipos de polilinha de rota

É possível personalizar os seguintes tipos de polilinha de rota:

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE e REMAINING_ROUTE são mostrados durante uma viagem e representam o trajeto do veículo.

Propriedades da polilinha de rota

O Google Maps oferece propriedades personalizáveis disponíveis para cada polilinha em PolylineOptions.

  • Para criar PolylineOptions, use o construtor dele.

  • Para especificar propriedades personalizadas, use métodos de estilo "Setter". Como o método fornece valores padrão para cada propriedade, você só precisa especificar os valores personalizados.

  • Para desativar a polilinha, defina visible como false.

Para mais detalhes, consulte PolylineOptions na documentação para desenvolvedores Android.

Exemplo

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)

Rota ativa e restante

Com o compartilhamento de trajeto ativado, seu app pode personalizar a experiência do usuário usando polilinhas para mostrar a rota ativa e restante do veículo.

  • A rota ativa é o caminho que o veículo está percorrendo para chegar ao próximo ponto de referência na viagem ativa do consumidor.

  • A rota restante é o caminho que o veículo ainda precisa percorrer após a rota ativa. Quando o ponto de parada da rota ativa é o último da viagem, a rota restante não existe.

É possível personalizar e controlar a visibilidade das polilinhas ativas e restantes no seu app. Por padrão, a rota ativa fica visível, e a restante não.

Exemplo

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)

Polilinhas com informações de trânsito

A camada de tráfego da polilinha fica desativada por padrão. Quando você ativa essa opção, o renderizador desenha segmentos acima da polilinha da rota que representam trechos de tráfego não normal. Ele inclui um ajuste dependendo da condição de trânsito. Consulte a documentação para desenvolvedores Android sobre Polylines para mais informações.

O Google Maps representa as condições de trânsito como um dos quatro tipos de velocidade. Você pode personalizar a cor de cada tipo de velocidade.

Para ativar as polilinhas com reconhecimento de tráfego, crie um objeto TrafficStyle e transmita-o para ConsumerMapStyle chamando setPolylineTrafficStyle().

Exemplo

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)