Personalização da IU do Android

O ConsumerMapStyle tem métodos setter e getter que oferecem personalização dinâmica para marcadores e polilinhas. Esta classe é exposta de forma assíncrona usando o ConsumerController.getConsumerMapStyle() .

A personalização da interface persiste entre rotações do dispositivo e permanece em vigor até que ConsumerController é independente.

Marcadores personalizados

O método para definir o tipo e as propriedades do marcador é ConsumerMapStyle.setMarkerStyleOptions(). Sua personalização As opções do marcador substituem os valores padrão fornecidos pelo SDK do consumidor. Para restaurar os valores padrão, chame setMarkerStyleOptions() usando um valor nulo. para o parâmetro MarkerOptions. Extrair o MarkerOptions ativo usando getMarkerStyleOptions().

Tipos de marcador

Os seguintes marcadores estão disponíveis para personalização:

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

TRIP_PICKUP_POINT e TRIP_DROPOFF_POINT são mostrados durante o monitoramento da viagem.

TRIP_VEHICLE é exibido durante o monitoramento da viagem. O ícone do marcador não muda de acordo com o tipo de veículo real da viagem. Atualizações do SDK para o consumidor a rotação do ícone TRIP_VEHICLE durante o monitoramento de viagem para imitar o comportamento do veículo enquanto ele percorre o trajeto.

Opções do marcador

As propriedades personalizáveis disponíveis para cada marcador são o conjunto de propriedades fornecidas pelo Google Maps MarkerOptions

O MarkerOptions é criado usando o próprio construtor, e as propriedades personalizadas são especificadas usando "Setter". métodos de estilo. Como os valores padrão são fornecidos para cada propriedade, você só precisa especificar valores personalizados.

Você pode desativar um marcador definindo visible como false. Deve ser fornecido dados suficientes para que você possa usar seu próprio elemento de IU no lugar dele.

Exemplo

Java

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

Kotlin

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

Polilinhas personalizadas

A personalização de polilinhas é definida usando o método ConsumerMapStyle.setPolylineStyleOptions. Como definir opções personalizadas de polilinha substitui os valores padrão fornecidos pelo SDK do consumidor. Os valores padrão podem ser restaurados chamando setPolylineStyleOptions com nulo para o parâmetro PolylineOptions. A fase PolylineOptions podem ser recuperadas usando o getPolylineStyleOptions.

Tipos de polilinha

Os seguintes tipos de polilinha estão disponíveis para personalização:

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE e REMAINING_ROUTE são exibidos durante o monitoramento da viagem e representar o trajeto do veículo.

Propriedades de polilinha

As propriedades personalizáveis disponíveis para cada polilinha são fornecidas pelo PolylineOptions do Google Maps. O PolylineOptions é criado usando o próprio construtor, e as propriedades personalizadas são especificadas usando "Setter". métodos de estilo. Valores padrão são fornecidos para cada propriedade, portanto, você só precisa especificar valores personalizados. Você pode desativar a polilinha definindo visible como false.

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)

Trajeto ativo e restante

Com o andamento de viagens e pedidos ativado, seu app pode personalizar o a experiência do usuário usando polilinhas que mostram seus veículos ativos e restantes trajeto.

O trajeto ativo é o caminho que o veículo percorre no momento o próximo ponto de referência na viagem ativa do consumidor. A rota restante é o caminho que o veículo percorrerá além do trajeto ativo. Quando a rota ativa waypoint é o último waypoint da viagem. O trajeto restante não existe.

As polilinhas ativas e restantes podem ser personalizadas e a visibilidade é controlada pelo seu app. Por padrão, a rota ativa fica visível, e o restante não está visível.

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 reconhecimento de tráfego

A camada de trânsito da polilinha fica desativada por padrão. Quando ele está ativado, os segmentos que representam trechos de trânsito fora do normal são desenhados acima da polilinha do trajeto no z-index PolylineOptions.getZIndex(), além de um deslocamento, dependendo da condição de tráfego.

As condições de trânsito são representadas quatro tipos de velocidade. Você pode personalizar a cor de cada tipo de velocidade.

Para ativar as "polilinhas com reconhecimento de trânsito", é necessário construir um objeto TrafficStyle que será transmitido 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)

Ajustando o zoom da câmera para focar em uma viagem

O botão "Meu local" padrão. integrado ao SDK do Maps, centraliza a câmera no local do dispositivo. Se houver uma sessão ativa de progresso de viagem e pedido, centralize o para focar na jornada em vez da localização do dispositivo.

Solução integrada do SDK do consumidor para Android: AutoCamera

Para que você se concentre na jornada em vez de se concentrar no local do dispositivo, o SDK do consumidor fornece um recurso AutoCamera que é ativado por padrão. A câmera aplica zoom para focar na rota em andamento da viagem e do pedido e no próximo waypoint da viagem.

Como personalizar o comportamento da câmera

Para controlar melhor o comportamento da câmera, desative ou ative AutoCamera usando ConsumerController.setAutoCameraEnabled().

ConsumerController.getCameraUpdate() retorna os limites recomendados da câmera no momento. Você pode Em seguida, forneça esse CameraUpdate como um argumento para GoogleMap.moveCamera() ou GoogleMap.animateCamera().

Estilização de mapas baseada na nuvem

Tanto o ConsumerMapView e o ConsumerMapFragment são compatíveis com a Estilização de mapas baseada na nuvem. Para usar a Estilização de mapas baseada na nuvem, verifique se os mapas selecionados O renderizador é LATEST. Os exemplos a seguir mostram como usar usando a Estilização de mapas baseada na nuvem.

ConsumerMapView

Para usar a Estilização de mapas baseada na nuvem no ConsumerMapView, defina o mapId em GoogleMapOptions e transmita GoogleMapOptions para getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Exemplo

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

Há duas maneiras de usar a Estilização de mapas baseada na nuvem em ConsumerMapFragments:

  1. Estaticamente com o XML.
  2. Dinamicamente com newInstance.

Estaticamente com o XML

Para usar a Estilização de mapas baseada na nuvem com o XML na ConsumerMapFragment, adicione o atributo XML map:mapId com o mapId Veja o exemplo a seguir:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Dinamicamente com newInstance

Para usar a Estilização de mapas baseada na nuvem com newInstance na ConsumerMapFragment, defina o campo mapId em GoogleMapOptions e transmita a GoogleMapOptions para newInstance. Veja o exemplo a seguir:

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}