Estilizar um mapa

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

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

Estilo do mapa com a Estilização de mapas baseada na nuvem

Personalizar a aparência do componente de mapas usando mapas baseados na nuvem estilização. 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. Para mais informações, consulte 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 os mapas selecionados O renderizador é LATEST. As seções a seguir mostram exemplos de como usar usando a Estilização de mapas baseada na nuvem.

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 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
  }
}

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

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

Estilizar mapas diretamente no seu código

Também é possível personalizar o estilo do mapa definindo as opções ao criar o JourneySharingMapView. Os exemplos a seguir mostram como estilizar um mapa usando 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 tarefa no mapa usando regras de visibilidade.

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ído ou cancelado.

Esta tabela mostra a visibilidade padrão para cada tipo de tarefa. Você pode personalizar a visibilidade de muitas tarefas, mas não de todas. Para mais detalhes sobre a tarefa tipos, consulte Tipos de tarefas no guia Tarefas agendadas.

Tipo de tarefa Visibilidade padrão Personalizável? Descrição
Tarefas de indisponibilidade Não visível Não Usado para intervalos 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.
Tarefas de veículos abertas Visível Sim A visibilidade termina quando a tarefa é concluída ou cancelada. Você pode personalizar a visibilidade das tarefas abertas no veículo. Consulte Personalizar a visibilidade de tarefas de veículo abertas.
Tarefas com veículos fechados Não visível Não Não é possível personalizar a visibilidade das tarefas com veículos fechados.

Personalizar a visibilidade das tarefas abertas do veículo

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

Elementos personalizáveis de dados de tarefas

Polilinhas de rota

Tempo estimado de chegada

Tempo estimado para concluir a tarefa

Distância restante até a tarefa

Contagem de paradas restantes

Localização do veículo

Opções de visibilidade por tarefa

Para personalizar a configuração de visibilidade por tarefa, defina o TaskTrackingViewConfig ao criar ou atualizar uma tarefa 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

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

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

O exemplo a seguir mostra essa configuração:

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

Regras de visibilidade da localização de veículos e polilinhas do trajeto

As polilinhas do trajeto só ficam visíveis quando o local do veículo é visible; caso contrário, o local do veículo pode ser inferido pelo fim de um polilinha.

Estas diretrizes ajudam a fornecer uma combinação válida para as opções de visibilidade de polilinha de rota e de 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 é:
  • contagem de paradas restantes
  • duração até a hora prevista de chegada
  • distância restante do percurso de carro

Definir as opções da polilinha do trajeto como um valor menor ou igual ao definido para a localização do veículo. Exemplo:

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
Opções de visibilidade diferentes Critérios de visibilidade Orientação
A localização do veículo está visível

Isso só acontece quando ambas as opções de localização do veículo e de visibilidade de linha poligonal 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

Você pode impedir que o mapa ajuste automaticamente a janela de visualização ao veículo e a rota prevista ao desativar o ajuste automático. O exemplo a seguir mostra como desativar o ajuste automático ao configurar o compartilhamento da jornada visualização de mapa.

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