Para seguir un viaje en tu app para el consumidor, primero debes definir un mapa y agregar compatibilidad con mapas vectoriales, si es necesario.
Para configurar un mapa en tu app, sigue estos pasos:
- Define un fragmento de mapa para seguir un viaje.
- Agrega compatibilidad con una capa base de mapas y un controlador de vistas.
- Agrega compatibilidad con gráficos vectoriales de Android para mostrar mapas vectoriales, si es necesario.
Después de definir un mapa, puedes agregar vistas y controles de cámara adicionales para personalizar la experiencia visual. Para obtener más detalles, consulta Cómo aplicar diseño a un mapa.
Paso 1: Define un fragmento de mapa para seguir un viaje
Para definir un mapa, agrega un fragmento o una vista de mapa para crear el mapa en el que compartirás un viaje a pedido en tu app para el consumidor. Para definir tu mapa, sigue uno de estos métodos:
ConsumerMapFragment
: Se usa para definir tu mapa con un objetoFragment
.ConsumerMapView
: Se usa para definir un mapa con un objetoView
.
Las funciones son las mismas para ambos métodos, así que elige el que sea mejor para tu aplicación.
Ambos métodos se explican con más detalle en la siguiente sección.
Cómo agregar un fragmento o una vista de mapa
Para crear un mapa que muestre el progreso del viaje con un fragmento o una vista de Android, sigue estos pasos y consulta los ejemplos de código.
Define un fragmento o una vista en el archivo XML de diseño de tu aplicación ubicado en
/res/layout
. Define el mapa del viaje como un fragmento conConsumerMapFragment
o como una vista conConsumerMapView
.Luego, el fragmento o la vista proporcionan acceso al mapa de viaje al que tu app puede acceder y modificar. El mapa también proporciona un identificador para el objeto
ConsumerController
, lo que permite que tu app controle y personalice la experiencia del consumidor.Desde tu método
onCreate()
, llama agetConsumerGoogleMapAsync(callback)
, que muestraConsumerGoogleMap
de forma asíncrona en la devolución de llamada.Usa
ConsumerGoogleMap
para mostrar el progreso del viaje y actualizarlo según sea necesario.
Ejemplo de cómo agregar ConsumerMapFragment
Define el fragmento en el archivo XML de diseño de tu aplicación, como se muestra en el siguiente ejemplo de código.
<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" />
Realiza una llamada a
getConsumerGoogleMapAsync()
desde el métodoonCreate()
.
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()!!
}
}
)
}
}
Ejemplo de cómo agregar ConsumerMapView
Usa la vista en un fragmento o en una actividad, como se define en tu archivo 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" />
Realiza la llamada a
getConsumerGoogleMapAsync()
desdeonCreate()
. Además del parámetro de devolución de llamada, incluye los siguientes detalles:Es la actividad o el fragmento que contiene el elemento. La clase base de la actividad o el fragmento debe ser un
FragmentActivity
o unFragmentActivity
de compatibilidad (respectivamente), ya que proporcionan acceso a su ciclo de vida.Fragment
GoogleMapOptions
(que puede ser nulo), que contiene atributos de configuración paraMapView
.
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,
)
}
}
Un MapView
en un fragmento es igual que en el ejemplo anterior para MapView
en una actividad, excepto que el fragmento infla el diseño que incluye el MapView
en el método onCreateView()
del 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)
}
}
Paso 2: Agrega compatibilidad con una capa base de mapas y un controlador de vistas
Para compartir el progreso del viaje en tu app, agrega las siguientes clases: ConsumerGoogleMap
y ConsumerController
.
Obtén
ConsumerGoogleMap
deConsumerMapFragment
oConsumerMapView
, los cuales devuelvenConsumerGoogleMap
de forma asíncrona enConsumerMapReadyCallback
.ConsumerGoogleMap
es una clase wrapper para la claseGoogleMap
. Utiliza una API equivalente aGoogleMap
para que tu app pueda interactuar con el mapa. De esta manera, tu app puede interactuar sin problemas con el mismo mapa subyacente de Google. Por ejemplo,GoogleMap
solo permite un registro de devolución de llamada, peroConsumerGoogleMap
admite devoluciones de llamada registradas dobles. Estas devoluciones de llamada permiten que tu app registre devoluciones de llamada que se llamen de forma secuencial.Obtén
ConsumerController
deConsumerGoogleMap
engetConsumerController()
.ConsumerController
proporciona acceso a funciones para compartir viajes, como supervisar viajes, controlar el estado de los viajes y establecer ubicaciones.
Para saber cómo agregar ConsumerGoogleMap
y ConsumerController
a tu app en Java y Kotlin, consulta los siguientes ejemplos.
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,
}
)
Paso 3: Agrega compatibilidad con gráficos vectoriales de Android
Si el diseño de tu app requiere compatibilidad con gráficos vectoriales, agrega compatibilidad con dispositivos Android y elementos de diseño vectoriales siguiendo estos pasos:
- Agrega el siguiente código a tu actividad. Este código extiende
AppCompatActivity
para usar los elementos vectoriales dibujables en el SDK de Consumer.
Java
// ...
import android.support.v7.app.AppCompatActivity;
// ...
public class ConsumerTestActivity extends AppCompatActivity {
// ...
}
Kotlin
// ...
import android.support.v7.app.AppCompatActivity
// ...
class ConsumerTestActivity : AppCompatActivity() {
// ...
}
Pasos siguientes
Cómo seguir un viaje en Android