0Pricing
Android Academy · Lección

Marcadores y cámara

Coloque marcadores y mueva la cámara

Marcadores y cámara es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

Marcar el mapa

Un mapa vacío solo contiene teselas. Los marcadores lo convierten en información: un pin para una tienda, un restaurante o el destino del usuario. Además, la cámara mueve la ventana visible a donde requiera la situación.

En esta lección añadirá marcadores, los personalizará, los agrupará en clústeres y animará la cámara suavemente entre distintos lugares.

Añadir un marcador

En maps-compose, los marcadores son componibles que se colocan dentro de GoogleMap, en su lambda de contenido. Cada Marker recibe un MarkerState que contiene su posición.

import com.google.maps.android.compose.Marker
import com.google.maps.android.compose.rememberMarkerState

@Composable
fun MapWithMarker() {
    val position = LatLng(37.7749, -122.4194)
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        Marker(
            state = rememberMarkerState(position = position),
            title = "San Francisco",
            snippet = "Welcome to SF"
        )
    }
}

Título, fragmento y ventanas de información

title y snippet aparecen en la ventana de información predeterminada cuando el usuario toca un marcador. Al tocarlo, el título se muestra en negrita y el fragmento aparece debajo.

Para tener un control total, puede proporcionar un MarkerInfoWindow con su propio contenido componible.

Marker(
    state = rememberMarkerState(position = LatLng(48.8584, 2.2945)),
    title = "Eiffel Tower",
    snippet = "Paris, France",
    // The info window pops up on tap by default
)

Personalizar el icono del marcador

Pase un BitmapDescriptor mediante el parámetro icon para cambiar el aspecto de un marcador. defaultMarker(hue) cambia el color del pin estándar; también puede crear uno a partir de un drawable.

import com.google.android.gms.maps.model.BitmapDescriptorFactory

Marker(
    state = rememberMarkerState(position = LatLng(35.6895, 139.6917)),
    title = "Tokyo",
    icon = BitmapDescriptorFactory.defaultMarker(
        BitmapDescriptorFactory.HUE_AZURE
    )
)

Varios marcadores a partir de datos

Las aplicaciones reales representan los marcadores a partir de una lista. Recorra los datos dentro del contenido del mapa y emita un Marker para cada elemento. Use una clave estable para cada elemento.

data class Place(val name: String, val latLng: LatLng)

@Composable
fun PlacesMap(places: List<Place>) {
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        places.forEach { place ->
            Marker(
                state = rememberMarkerState(position = place.latLng),
                title = place.name
            )
        }
    }
}

Gestionar los clics en los marcadores

Cada Marker acepta una lambda onClick. Devuelva true para consumir el evento, suprimiendo la ventana de información predeterminada, o false para permitir el comportamiento predeterminado.

Marker(
    state = rememberMarkerState(position = LatLng(40.7128, -74.0060)),
    title = "New York",
    onClick = {
        // handle the tap, e.g. open a detail screen
        true // consume the event
    }
)

Mover la cámara al instante

Para cambiar la ventana visible sin animación, establezca directamente la posición de la cámara en CameraPositionState. Es un cambio brusco: el mapa salta directamente a la nueva posición.

val cameraPositionState = rememberCameraPositionState()

// Instant move
cameraPositionState.position = CameraPosition.fromLatLngZoom(
    LatLng(51.5074, -0.1278), // London
    14f
)

Animar la cámara

Para conseguir una experiencia más pulida, anime la cámara con animate(). Es una llamada suspendible, así que debe iniciarla desde un ámbito de corrutinas. Use un CameraUpdate para describir el destino.

import com.google.android.gms.maps.CameraUpdateFactory

val scope = rememberCoroutineScope()
Button(onClick = {
    scope.launch {
        cameraPositionState.animate(
            CameraUpdateFactory.newLatLngZoom(
                LatLng(48.8566, 2.3522), 13f
            ),
            durationMs = 1000
        )
    }
}) { Text("Fly to Paris") }

Ajustar la vista a varios marcadores

Para mostrar varios marcadores a la vez, cree un LatLngBounds que los contenga todos y, después, anímelo con newLatLngBounds junto con un margen en píxeles.

import com.google.android.gms.maps.model.LatLngBounds

val bounds = LatLngBounds.Builder().apply {
    places.forEach { include(it.latLng) }
}.build()

scope.launch {
    cameraPositionState.animate(
        CameraUpdateFactory.newLatLngBounds(bounds, 100) // 100px padding
    )
}

Agrupar muchos marcadores

Cientos de marcadores saturan el mapa. La biblioteca maps-compose-utils proporciona Clustering, que agrupa los marcadores cercanos en una sola burbuja que se divide al acercar el zoom.

import com.google.maps.android.compose.clustering.Clustering

@Composable
fun ClusteredMap(items: List<MyClusterItem>) {
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        Clustering(items = items)
    }
}

Leer el estado de la cámara

También puede leer la cámara. cameraPositionState.position proporciona el objetivo y el zoom actuales, mientras que isMoving indica si el usuario está desplazando el mapa en ese momento. Esto resulta útil para cargar datos de forma diferida solo para la región visible.

LaunchedEffect(cameraPositionState.isMoving) {
    if (!cameraPositionState.isMoving) {
        val center = cameraPositionState.position.target
        // fetch data near `center`
    }
}

Comprobación rápida

Quiere que la cámara se deslice suavemente hasta una nueva ubicación durante un segundo, en lugar de saltar directamente. ¿Cuál es la opción correcta?

Resumen

Ahora puede hacer que un mapa sea informativo y dinámico:

  • Coloque componibles Marker dentro del contenido de GoogleMap, con title, snippet y un icon personalizado.
  • Represente marcadores a partir de una lista de datos y gestione onClick.
  • Mueva la cámara al instante mediante position o suavemente mediante animate().
  • Ajuste la vista a muchos puntos con LatLngBounds y reduzca la saturación mediante Clustering.

A continuación: solicitar correctamente los permisos de ubicación para que todo esto funcione en dispositivos reales.

Preguntas frecuentes

¿La lección «Marcadores y cámara» es gratis?

Sí — el texto completo de «Marcadores y cámara» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Marcadores y cámara»?

Coloque marcadores y mueva la cámara Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Marcadores y cámara»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Cómo mostrar un mapa
  2. Cómo obtener la ubicación del usuario
  3. Marcadores y cámara
  4. Permisos de ubicación correctamente implementados
← Volver a Android Academy