Personalizar polilinhas do trajeto

Selecione a plataforma: Android iOS JavaScript

Personalize as polilinhas de rota usando o método ConsumerMapStyle.setPolylineStyleOptions. Se você definir opções de linha poligonal personalizada, elas vão substituir os valores padrão fornecidos pelo SDK do consumidor.

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 exibidos ao seguir uma viagem e representam a rota do veículo.

Propriedades da polilinha da rota

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

• Para criar PolylineOptions, use o construtor.

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

• Para desativar a poligonal, defina visible como false.

Para mais detalhes, consulte PolylineOptions na documentação para desenvolvedores do 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 passagem da 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 passagem da rota ativa é o último ponto de passagem da viagem, a rota restante não existe.

É possível personalizar e controlar a visibilidade das polilinhas ativas e restantes no app. Por padrão, a rota ativa é 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 poligonal 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 normais. Ele inclui um deslocamento dependendo da condição do tráfego. Consulte a documentação para desenvolvedores do Android sobre Polyline 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 polilinhas com informações 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)