Android Academy · Lezione

Marcatori e videocamera

Posizioni i marcatori e sposti la videocamera

Marcatori e videocamera è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 4 lezioni in totale.

Contrassegnare la mappa

Una mappa vuota contiene solo riquadri. I marker la trasformano in informazioni: un segnaposto per un negozio, un ristorante o la destinazione dell'utente. La fotocamera sposta invece l'area visualizzata ovunque lo richieda la situazione.

In questa lezione aggiungerà marker, li personalizzerà, li raggrupperà in cluster e animerà la fotocamera in modo fluido tra luoghi diversi.

Aggiungere un marker

In maps-compose, i marker sono composable da inserire all'interno della lambda dei contenuti di GoogleMap. Ogni Marker accetta un MarkerState che contiene la posizione.

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"
        )
    }
}

Titolo, snippet e finestre informative

title e snippet vengono visualizzati nella finestra informativa predefinita quando l'utente tocca un marker. Il tocco mostra il titolo in grassetto e lo snippet sotto di esso.

Per avere il pieno controllo, può fornire un MarkerInfoWindow con contenuti composable personalizzati.

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

Personalizzare l'icona del marker

Passi un BitmapDescriptor tramite il parametro icon per modificare l'aspetto di un marker. defaultMarker(hue) cambia il colore del segnaposto standard; può anche crearne uno a partire da una risorsa 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
    )
)

Molti marker dai dati

Le app reali visualizzano i marker a partire da un elenco. Scorra i dati all'interno dei contenuti della mappa ed emetta un Marker per ogni elemento. Usi una chiave stabile per ogni 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
            )
        }
    }
}

Gestire i clic sui marker

Ogni Marker accetta una lambda onClick. Restituisca true per consumare l'evento e impedire la finestra informativa predefinita, oppure false per consentire il comportamento predefinito.

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
    }
)

Spostare immediatamente la fotocamera

Per spostare l'area visualizzata senza animazione, imposti direttamente la posizione della fotocamera su CameraPositionState. Si tratta di un cambio istantaneo: la mappa si sposta senza transizione.

val cameraPositionState = rememberCameraPositionState()

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

Animare la fotocamera

Per un'esperienza più curata, animi la fotocamera con animate(). È una chiamata sospendibile, quindi la avvii da un ambito di coroutine. Usi un CameraUpdate per descrivere la destinazione.

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") }

Adattare la visualizzazione a più marker

Per mostrare più marker contemporaneamente, costruisca un LatLngBounds che li contenga tutti, quindi animi la fotocamera verso di esso con newLatLngBounds, aggiungendo un margine in pixel.

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
    )
}

Raggruppare molti marker in cluster

Centinaia di marker rendono la mappa difficile da leggere. La libreria maps-compose-utils fornisce Clustering, che raggruppa i marker vicini in un'unica bolla, la quale si divide aumentando lo zoom.

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

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

Leggere lo stato della fotocamera

Può anche leggere la fotocamera. cameraPositionState.position fornisce la destinazione e lo zoom correnti, mentre isMoving indica se l'utente sta spostando la mappa. È utile per caricare dati in modo differito solo per la regione visibile.

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

Verifica rapida

Vuole che la fotocamera raggiunga gradualmente una nuova posizione in un secondo, invece di spostarsi istantaneamente. Qual è l'approccio corretto?

Riepilogo

Ora è in grado di rendere una mappa informativa e dinamica:

Inserisca i composable Marker nei contenuti di GoogleMap, con title, snippet e un'icon personalizzata.
Visualizzi i marker a partire da un elenco di dati e gestisca onClick.
SpostI la fotocamera istantaneamente tramite position oppure in modo fluido tramite animate().
Adatti la visualizzazione a molti punti con LatLngBounds e riduca il disordine usando Clustering.

Prossimo argomento: richiedere correttamente le autorizzazioni di posizione, affinché tutto funzioni sui dispositivi reali.

Domande Frequenti

La lezione «Marcatori e videocamera» è gratuita?

Sì — il testo completo di «Marcatori e videocamera» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 4 lezioni in totale.

Cosa imparerò in «Marcatori e videocamera»?

Posizioni i marcatori e sposti la videocamera Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Android Academy?

Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Marcatori e videocamera»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Android Academy?

Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Mostrare una mappa
Ottenere la posizione dell'utente
Marcatori e videocamera
Gestire correttamente i permessi di posizione

← Torna a Android Academy