Jetpack Compose: Google Maps Camera Motion Listener | Erselan Khan | Por Erselan Khan | Marzo de 2022

Hoy te mostraremos cómo lo configuramos monitor de movimiento de la cámara Usar en Google Maps composición de mochila propulsoraPero antes de seguir quiero preguntarte follow Mi cuenta mediana para obtener las últimas actualizaciones de Android y otros temas relacionados con la tecnología.

En mi artículo anterior, hablé sobre los marcadores de clientes en Google Maps usando Jetpack Compose. Hoy continuamos con mi artículo anterior, por lo que si no ha leído ese artículo, le recomendamos que lo lea primero.

Ahora vayamos más allá y agreguemos las dependencias requeridas. Mapa de Google:

dependencies {
implementation "com.google.maps.android:maps-compose:1.0.0"
implementation "com.google.android.gms:play-services-maps:18.0.2"
}

Ahora tenemos que agregar Clave API en nuestro AndroidManifest.xml documento:

android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.Compose">
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/Theme.Compose">



				

					


						

							
Publicaciones relacionadas
						

						

							

								


			


			
					

	
	

		Bienvenido a la aplicación FullPOS. FullPOS es el mejor y más completo… | Por Akash Pataka | Febrero de 2022

		

			febrero 1, 2022		
	




			


			
					

	
	

		Administrador de temas de animación de Android.A veces, su aplicación de Android puede necesitar … | Autor: Iman Dolatkia | Agosto de 2021

		

			agosto 31, 2021		
	

							
						
					
				
				
android:name="com.google.android.geo.API_KEY"
android:value="AIza*************************"/>

Jetpack Compose nos da GoogleMap() función, al usar esto podemos mostrar fácilmente un mapa de Google en nuestra pantalla:

val markerPosition = LatLng(1.35, 103.87)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(markerPosition, 15f)
}
GoogleMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState
) {
Marker(
position = markerPosition,
title = "Your Title",
snippet = "Place Name"
)
}

Usamos Jetpack Compose para mostrar el marcado Marker() Función.Ponemos el modificador en relleno_tamaño_máximo(), Entonces, el mapa ocupa toda la pantalla y también configuramos la posición de la cámara del mapa en nuestra posición de marcador. La salida se verá así:

Ahora tenemos que mover el icono del marcador en relación con la cámara de Google Maps. Por lo tanto, debemos agregar un icono personalizado (que represente un marcador) en el centro de la pantalla y mover el marcador cuando el usuario mueva el mapa de Google.

eliminemos marca Funciones de Jetpack Compose y adición de iconos personalizados en el centro de la pantalla:

@Composable
fun MapScreen() {
val markerPosition = LatLng(1.35, 103.87)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(markerPosition, 18f)
}
GoogleMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState
)
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
IconButton(
onClick = {
},
) {
Image(
painter = painterResource(id = R.drawable.ic_map_marker),
contentDescription = "marker",
)
}
}
}

acabamos de eliminar marca Funciones y usos de Jetpack Compose botón de icono Características de Jetpack Compose.Necesitamos configurar el ícono personalizado en el centro de la pantalla, esto es lo que usamos Pilar La función con el modificador es modificadortamaño máximo de relleno()Ahora ejecute la aplicación y vea el resultado:

Text(text = "Is camera moving: ${cameraPositionState.isMoving}" +
"\n Latitude and Longitude: ${cameraPositionState.position.target.latitude} " +
"and ${cameraPositionState.position.target.longitude}",
textAlign = TextAlign.Center
)

@Composable
fun MapScreen() {
val markerPosition = LatLng(1.35, 103.87)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(markerPosition, 18f)
}
GoogleMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState
)
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
IconButton(
onClick = {
},
) {
Image(
painter = painterResource(id = R.drawable.ic_map_marker),
contentDescription = "marker",
)
}
Text(text = "Is camera moving: ${cameraPositionState.isMoving}" +
"\n Latitude and Longitude: ${cameraPositionState.position.target.latitude} " +
"and ${cameraPositionState.position.target.longitude}",
textAlign = TextAlign.Center
)
}
}