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 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.
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)