Google Maps Compose Android en Jetpack | Por Muhammad Danish | Mayo de 2021
En comparación con Android xml, la integración de Google Maps en Jetpack Compose es un poco difícil. Sin bloqueo, sin Xml, no podemos integrar Google Maps en la aplicación de Android jetpack compose.
Para integrar Google Maps en jetpack compose, debe producir una secreto de API de Google Map desde Google Cloud Console, y luego debe pegar las siguientes dependencias.
implementation("com.google.android.libraries.maps:maps:3.1.0-beta")
implementation("com.google.maps.android:maps-v3-ktx:2.2.0")
implementation("androidx.fragment:fragment:1.3.2")
Posteriormente de eso, agregue una fórmula de metadatos con la secreto API de Google Map y permisos de Internet a su archivo manifest.xml de Android
<uses-permission android:name="android.permission.INTERNET"/><meta-data android:name="com.google.android.geo.API_KEY"
android:value="Api_key_here"/>
Ahora crea un nuevo directorioTCree ory en el directorio res y asígnele el nombre layout y cree un nuevo archivo de posibles, al igual que el archivo layout_map.xml que creé y agregue el futuro código al archivo
<androidx.fragment.app.FragmentContainerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Ahora querrás asimilar cómo lo usamos en jetpack compose, así que no te preocupes, yo todavía te lo mostraré.
Ahora cree un nuevo archivo, asígnele el nombre MapUtils.kt y agréguele el futuro código
@Composable
fun rememberMapViewWithLifecycle(): MapView
val context = LocalContext.current
val mapView = remember
MapView(context).apply
id = R.id.map
// Makes MapView follow the lifecycle of this composable
val lifecycleObserver = rememberMapLifecycleObserver(mapView)
val lifecycle = LocalLifecycleOwner.current.lifecycle
DisposableEffect(lifecycle)
lifecycle.addObserver(lifecycleObserver)
onDispose
lifecycle.removeObserver(lifecycleObserver)
return mapView
@Composable
fun rememberMapLifecycleObserver(mapView: MapView): LifecycleEventObserver =
remember(mapView)
LifecycleEventObserver _, event ->
when (event)
Lifecycle.Event.ON_CREATE -> mapView.onCreate(Bundle())
Lifecycle.Event.ON_START -> mapView.onStart()
Lifecycle.Event.ON_RESUME -> mapView.onResume()
Lifecycle.Event.ON_PAUSE -> mapView.onPause()
Lifecycle.Event.ON_STOP -> mapView.onStop()
Lifecycle.Event.ON_DESTROY -> mapView.onDestroy()
else -> throw IllegalStateException()
Estas son las dos funciones componibles que usaremos. Copié estas funciones de https://github.com/joreilly/GalwayBus, puedes ver más información.
Posteriormente de eso, debe escribir lo futuro en la función componible de la actividad
val mapView = rememberMapViewWithLifecycle()
Podemos usar AndroidView () en una función componible usando el archivo de diseño Xml
Column(
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()
.background(Color.White)
)
AndroidView( mapView) mapView->
CoroutineScope(Dispatchers.Main).launch
val map = mapView.awaitMap()
map.uiSettings.isZoomControlsEnabled = trueval pickUp = LatLng(-35.016, 143.321)
val destination = LatLng(-32.491, 147.309)
map.moveCamera(CameraUpdateFactory.newLatLngZoom(destination,6f))
val markerOptions = MarkerOptions()
.title("Sydney Opera House")
.position(pickUp)
map.addMarker(markerOptions)
val markerOptionsDestination = MarkerOptions()
.title("Restaurant Hubert")
.position(destination)
map.addMarker(markerOptionsDestination)
map.addPolyline(PolylineOptions().add( pickUp,
LatLng(-34.747, 145.592),
LatLng(-34.364, 147.891),
LatLng(-33.501, 150.217),
LatLng(-32.306, 149.248),
destination))
Inicialicé el plano en el gravedad de la corrutina, dibujé dos marcadores en el plano y luego dibujé una polilínea para una visualización regular.
El resultado final:
Si tiene algún problema, deje un comentario para que pueda ayudarlo.
