Estilizar um mapa

Este documento aborda como personalizar a aparência de um mapa e controlar a visibilidade dos dados e as opções de visualização. Você pode fazer isso das seguintes maneiras:

• Usar a Estilização de mapas baseada na nuvem
• Definir opções de estilo do mapa diretamente no seu código

Estilizar mapas com a Estilização de mapas baseada na nuvem

Personalize a aparência do componente de mapas usando a Estilização de mapas baseada na nuvem. Você cria e edita estilos de mapa no console do Google Cloud para qualquer um dos seus apps que usam o Google Maps, sem precisar fazer mudanças no código. Saiba mais em Estilização de mapas baseada na nuvem.

As classes ConsumerMapView e ConsumerMapFragment oferecem suporte à Estilização de mapas baseada na nuvem. Para usar a Estilização de mapas baseada na nuvem, verifique se o renderizador de mapas selecionado é LATEST. As seções a seguir mostram exemplos de como usar o estilo de mapas baseados na nuvem com seu projeto.

ConsumerMapView

Para usar o estilo de mapas baseado na nuvem no ConsumerMapView, defina o campo mapId em GoogleMapOptions e transmita o GoogleMapOptions para getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) ou 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:

• Estaticamente com o XML.
• Dinamicamente com newInstance.

Estática com o XML

Para usar a Estilização de mapas baseada na nuvem com o XML no ConsumerMapFragment, adicione o atributo XML map:mapId com o mapId especificado. 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 em ConsumerMapFragment, defina o campo mapId em GoogleMapOptions e transmita o 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
  }
}

Para aplicar um estilo de mapa ao seu mapa de compartilhamento de viagens do consumidor em JavaScript, especifique um mapId e qualquer outro mapOptions ao criar o JourneySharingMapView.

Observação: não é possível mudar ou adicionar um mapId depois que o JourneySharingMapView for instanciado.

Os exemplos a seguir mostram como aplicar um estilo de mapa com um ID.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // Any other styling options.
});

Estilos de mapa diretamente no seu código

Você também pode personalizar a estilização do mapa definindo opções ao criar a JourneySharingMapView. Os exemplos a seguir mostram como estilizar um mapa usando as opções de mapa. Para mais informações sobre as opções de mapa que você pode definir, consulte mapOptions na referência da API Maps JavaScript.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

Controlar a visibilidade dos dados da tarefa para o SDK

É possível controlar a visibilidade de determinados objetos de tarefas no mapa usando regras de visibilidade.

Observação :os marcadores de local estão sempre visíveis no mapa. Por exemplo, o local de entrega de um envio é sempre mostrado no mapa, independente do estado da entrega. No entanto, é possível personalizar a aparência desses marcadores. Consulte Personalizar marcadores.

Visibilidade padrão dos dados da tarefa

Por padrão, os dados das tarefas atribuídas a um veículo ficam visíveis quando o veículo está a até cinco paradas da tarefa. A visibilidade termina quando a tarefa é concluída ou cancelada.

Esta tabela mostra a visibilidade padrão para cada tipo de tarefa. É possível personalizar a visibilidade de muitas tarefas, mas não de todas. Para mais detalhes sobre os tipos de tarefa, consulte Tipos de tarefa no guia Tarefas programadas.

Tipo de tarefa	Visibilidade padrão	Personalizável?	Descrição
Tarefas de indisponibilidade	Não visível	Não	Usado para pausas e reabastecimento do motorista. Se um trajeto para uma tarefa de entrega também tiver outra parada de veículo, essa parada não será mostrada se tiver apenas tarefas de indisponibilidade. O horário previsto de chegada e o tempo estimado de conclusão da tarefa ainda são mostrados para a tarefa de entrega.
Abrir tarefas do veículo	Visível	Sim	A visibilidade termina quando a tarefa é concluída ou cancelada. É possível personalizar a visibilidade das tarefas de veículos abertas. Consulte Personalizar a visibilidade de tarefas de veículo abertas.
Tarefas de veículos fechados	Não visível	Não	Não é possível personalizar a visibilidade de tarefas de veículos encerrados.

Personalizar a visibilidade das tarefas de veículos abertos

A interface TaskTrackingInfo fornece vários elementos de dados de tarefas que podem ser mostrados com o SDK do consumidor.

Elementos de dados de tarefas personalizáveis
Polilinhas de rota Tempo estimado para chegada Tempo estimado para concluir a tarefa	Distância restante até a tarefa Contagem de paradas restantes Local do veículo

Opções de visibilidade por tarefa

É possível personalizar a configuração de visibilidade por tarefa definindo o TaskTrackingViewConfig ao criar ou atualizar uma tarefa no Fleet Engine. Use as opções de visibilidade a seguir para criar critérios para determinar a visibilidade de um elemento de tarefa:

Opções de visibilidade
Contagem de paradas restantes Duração até o horário estimado de chegada Distância restante para chegar ao destino	Sempre visível Nunca visível

Observação: qualquer elemento de dados pode ser associado a apenas uma opção de visibilidade. Não é possível combinar critérios usando "OU" ou "E".

Para ilustrar, suponha que um exemplo de personalização ajuste a visibilidade de três elementos de dados usando os critérios mostrados na tabela a seguir. Todos os outros elementos seguem as regras de visibilidade padrão.

Elemento de dados a ser ajustado	Visibilidade	Critério
Polilinha de rota	Mostrar	O veículo está a 3 paradas.
HEC	Mostrar	A distância restante é menor que 5.000 metros.
Contagem de paradas restantes	Nunca mostrar	O veículo está a três paradas.

O exemplo a seguir mostra essa configuração:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

Observação :para personalizar as opções de visibilidade padrão do projeto, entre em contato com a equipe de suporte.

Polilinhas de rota e regras de visibilidade de local do veículo

As polilinhas do trajeto só ficam visíveis quando o local do veículo também é. Caso contrário, ele pode ser inferido pelo fim de uma polilinha.

Ponto-chave:as regras de visibilidade da polilinha do trajeto precisam ser igualmente restritivas ou mais restritivas do que as regras de visibilidade da localização do veículo.

Estas diretrizes ajudam a fornecer uma combinação válida para a polilinha do trajeto e as opções de visibilidade da localização do veículo.

Mesmas opções de visibilidade	Critério de visibilidade	Orientação
	Opções de polilinhas de trajeto definidas como sempre visíveis.	Defina a localização do veículo como "Sempre visível".
	A localização do veículo está definida como "nunca visível".	Define as polilinhas de rota como nunca visíveis.
	A opção de visibilidade pode ser: Contagem de paradas restantes duração até a hora prevista de chegada distância de carro restante	Defina as opções de linha poligonal da rota como um valor menor ou igual ao valor definido para a localização do veículo. Exemplo: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }
Diferentes opções de visibilidade	Critérios de visibilidade	Orientação
	A localização do veículo está visível	Isso acontece apenas quando as duas opções de visibilidade da polilinha e de localização do veículo são atendidas. Exemplo: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } Neste exemplo, a localização do veículo só fica visível se a contagem de paradas restantes for de pelo menos 3 E a distância de percurso restante for de pelo menos 3.000 metros.

Desativar ajuste automático

É possível desativar o ajuste automático para impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e a rota antecipada. O exemplo abaixo mostra como desativar o ajuste automático ao configurar a visualização de mapa do compartilhamento de jornada.

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

A seguir

• Personalizar marcadores
• Personalizar polilinhas