Configurar um mapa

Selecione a plataforma: Android iOS

Para acompanhar uma viagem no aplicativo para o consumidor, primeiro defina um mapa e adicione suporte a mapas vetoriais, se necessário.

Para configurar um mapa no app, siga estas etapas:

  1. Defina um fragmento de mapa para acompanhar uma viagem.
  2. Adicionar suporte a uma camada de base de mapas e um controlador de visualização.
  3. Adicione suporte a gráficos vetoriais do Android para mostrar mapas vetoriais, se necessário.

Depois de definir um mapa, você pode adicionar outras visualizações e controles de câmera para personalizar a experiência visual. Para mais detalhes, consulte Estilizar um mapa.

Etapa 1: definir um fragmento de mapa para acompanhar uma viagem

Para definir um mapa, adicione um fragmento ou uma visualização de mapa para criar o mapa em que você compartilha uma viagem sob demanda no seu aplicativo para o consumidor. Para definir o mapa, siga um destes métodos:

  • ConsumerMapFragment: use para definir seu mapa com um Fragment.

  • ConsumerMapView: usado para definir um mapa com um View.

Os recursos são os mesmos para os dois métodos. Escolha o que for melhor para seu aplicativo.

Os dois métodos são explicados em mais detalhes na seção a seguir.

Adicionar um fragmento ou uma visualização de mapa

Para criar um mapa que mostre o progresso da viagem usando um fragmento ou uma visualização do Android, siga estas etapas e consulte os exemplos de código.

  1. Defina um fragmento ou uma visualização no arquivo XML de layout do aplicativo localizado em /res/layout. Defina o mapa da viagem como um fragmento usando ConsumerMapFragment ou como uma visualização usando ConsumerMapView.

    O fragmento ou a visualização fornece acesso ao mapa da viagem, que pode ser acessado e modificado pelo app. O mapa também fornece um handle para o ConsumerController, que permite que seu app controle e personalize a experiência do consumidor.

  2. No método onCreate(), chame getConsumerGoogleMapAsync(callback), que retorna o ConsumerGoogleMap de forma assíncrona no callback.

  3. Use o ConsumerGoogleMap para mostrar o progresso da viagem e atualizar conforme necessário.

Exemplo de como adicionar ConsumerMapFragment

  1. Defina o fragmento no arquivo XML de layout do aplicativo, conforme mostrado no exemplo de código a seguir.

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

  2. Chame getConsumerGoogleMapAsync() do método onCreate().

Java

 public class SampleAppActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {

     // Find the ConsumerMapFragment.
     ConsumerMapFragment consumerMapFragment =
         (ConsumerMapFragment) fragmentManager.findFragmentById(R.id.consumer_map_fragment);

     // Initiate the callback that returns the map.
     if (consumerMapFragment != null) {
       consumerMapFragment.getConsumerGoogleMapAsync(
           new ConsumerMapReadyCallback() {
             // The map returned in the callback is used to access the ConsumerController.
             @Override
             public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
               ConsumerController consumerController = consumerGoogleMap.getConsumerController();
             }
           });
     }
   }

 }

Kotlin

 class SampleAppActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     // Find the ConsumerMapFragment.
     val consumerMapFragment =
       fragmentManager.findFragmentById(R.id.consumer_map_fragment) as ConsumerMapFragment

     consumerMapFragment.getConsumerGoogleMapAsync(
       object : ConsumerMapReadyCallback() {
         override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
           val consumerController = consumerGoogleMap.getConsumerController()!!
         }
       }
     )
   }
 }

Exemplo de como adicionar ConsumerMapView

  1. Use a visualização em um fragmento ou em uma atividade, conforme definido no seu arquivo XML.

     <com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapView
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/consumer_map_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent" />

  2. Faça a ligação para getConsumerGoogleMapAsync() de onCreate(). Além do parâmetro de callback, inclua os seguintes detalhes:

    • A atividade ou o fragmento que contém. A classe base de atividade ou fragmento precisa ser um FragmentActivity ou um Fragment de suporte (respectivamente), já que eles fornecem acesso ao ciclo de vida.

    • GoogleMapOptions (que pode ser nulo), contendo atributos de configuração para o MapView.

Java

public class SampleAppActivity extends AppCompatActivity {

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

    if (mapView != null) {
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            // The map returned in the callback is used to access the ConsumerController.
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              ConsumerController consumerController = consumerGoogleMap.getConsumerController();
            }
          }, this, null);
    }
  }

}

Kotlin

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

    mapView.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        // The map returned in the callback is used to access the ConsumerController.
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          val consumerController = consumerGoogleMap.getConsumerController()!!
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ null,
    )
  }
}

Um MapView em um fragmento é o mesmo que no exemplo anterior para MapView em uma atividade, exceto que o fragmento aumenta o layout que inclui o MapView no método onCreateView() do fragmento.

Java

public class MapViewInFragment extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater layoutInflater,
      @Nullable ViewGroup viewGroup,
      @Nullable Bundle bundle) {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false);
  }

}

Kotlin

class MapViewInFragment : Fragment() {
  override fun onCreateView(
    layoutInflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?,
  ): View {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false)
  }
}

Etapa 2: adicionar suporte a uma camada de base de mapas e um controlador de visualização

Para compartilhar o progresso da viagem no seu app, adicione as seguintes classes: ConsumerGoogleMap e ConsumerController.

  • Receba ConsumerGoogleMap de ConsumerMapFragment ou ConsumerMapView. Ambos retornam de forma assíncrona ConsumerGoogleMap em ConsumerMapReadyCallback.

    ConsumerGoogleMap é uma classe wrapper para a classe GoogleMap. Ele usa um equivalente de API a GoogleMap para que seu app possa interagir com o mapa. Assim, seu app pode interagir perfeitamente com o mesmo mapa do Google. Por exemplo, GoogleMap permite apenas um registro de callback, mas ConsumerGoogleMap aceita callbacks registrados duplos. Com esses callbacks, seu app pode registrar callbacks que são chamados sequencialmente.

  • Ganhe ConsumerController de ConsumerGoogleMap em getConsumerController().

    O ConsumerController oferece acesso a recursos de compartilhamento de viagens, como monitorar viagens, controlar o status delas e definir locais.

Para saber como adicionar ConsumerGoogleMap e ConsumerController ao seu app em Java e Kotlin, consulte os exemplos a seguir.

Java

private ConsumerGoogleMap consumerGoogleMap;
private ConsumerController consumerController;
private ConsumerMapView consumerMapView;

consumerMapView.getConsumerGoogleMapAsync(
    new ConsumerMapReadyCallback() {
      @Override
      public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerMap) {
        consumerGoogleMap = consumerMap;
        consumerController = consumerMap.getConsumerController();
      }
    },
    this, null);

Kotlin

var consumerGoogleMap: ConsumerGoogleMap
var consumerController: ConsumerController
val consumerMapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

consumerMapView.getConsumerGoogleMapAsync(
  object : ConsumerMapReadyCallback() {
    override fun onConsumerMapReady(consumerMap: ConsumerGoogleMap) {
      consumerGoogleMap = consumerMap
      consumerController = consumerMap.getConsumerController()
    },
    /* fragmentActivity= */ this,
    /* googleMapOptions= */ null,
  }
)

Etapa 3: adicionar suporte a gráficos vetoriais do Android

Se o design do app exigir suporte a gráficos vetoriais, adicione suporte a dispositivos Android e elementos gráficos vetoriais usando estas etapas:

  1. Adicione o código abaixo à sua atividade. Esse código estende AppCompatActivity para usar os drawables vetoriais no SDK do consumidor.

Java

// ...
import android.support.v7.app.AppCompatActivity;

// ...

public class ConsumerTestActivity extends AppCompatActivity {
  // ...
}

Kotlin

// ...
import android.support.v7.app.AppCompatActivity

// ...

class ConsumerTestActivity : AppCompatActivity() {
  // ...
}

A seguir

Acompanhar uma viagem no Android

Personalizar o estilo de um mapa