Libreria di Maps

Jetpack Compose è un toolkit per la UI nativa dichiarativa che semplifica e accelera lo sviluppo della UI. Con Jetpack Compose, descrivi l'aspetto che vuoi che abbia la tua app e poi lasci che Jetpack Compose si occupi del resto.

La libreria Maps Compose per Maps SDK for Android è un insieme di funzioni componibili e tipi di dati open source che puoi utilizzare con Jetpack Compose per creare la tua app.

La libreria Maps Compose contiene funzioni componibili e tipi di dati che ti consentono di eseguire molte attività comuni. Ecco alcune delle funzioni componibili e dei tipi di dati di uso comune:

Componibile Descrizione
Cerchia Funzione componibile per aggiungere un cerchio a una mappa.
GoogleMap Funzione componibile per aggiungere una mappa.
GroundOverlay Funzione componibile per aggiungere un overlay del terreno a una mappa.
MapProperties Tipo di dati per le proprietà che possono essere modificate su una mappa.
MapUISettings Tipo di dati per le impostazioni relative alla UI su una mappa.
Indicatore Funzione componibile per aggiungere un indicatore a una mappa.
Poligono Funzione componibile per aggiungere un poligono a una mappa.
Polilinea Funzione componibile per aggiungere una polilinea a una mappa.
TileOverlay Funzione componibile per aggiungere un overlay di riquadri a una mappa.

Per un elenco completo di tutte le funzioni componibili e di tutti i tipi di dati, consulta il riferimento della libreria Maps Compose.

Requisiti

Per utilizzare la libreria Maps Compose con Maps SDK for Android, devi:

  • Scarica e installa Android Studio Arctic Fox.

  • Crea un progetto di Google Maps in Android Studio con:

    • Un tipo di modello Empty Compose Activity. Questo modello aggiunge le dipendenze necessarie richieste da Jetpack Compose.
    • SDK minimo impostato su livello API Android 23 ("Marshmallow"; Android 6.0) o versioni successive.
    • Linguaggio impostato su Kotlin.

  • Ottieni una chiave API e aggiungila al tuo progetto.

  • Installa la libreria Maps Compose nel progetto come descritto nella sezione successiva.

Installazione

Per installare la libreria Maps Compose nel tuo progetto Google Maps:

  1. Aggiungi le seguenti dipendenze al file build.gradle.kts a livello di modulo:

      dependencies {

    // Modern Android projects use version catalogs to manage dependencies. To include the Maps Compose library,
    // first add the following to your gradle/libs.versions.toml file:
    //
    // [versions]
    // mapsCompose = "8.4.0"
    //
    // [libraries]
    // maps-compose = { module = "com.google.maps.android:maps-compose", version.ref = "mapsCompose" }
    //
    // Android Maps Compose composables for the Maps SDK for Android
    implementation(libs.maps.compose)
    // If your project does not use a version catalog, you can use the following dependency instead:
    //
    //    implementation("com.google.maps.android:maps-compose:8.4.0")
}

  2. Ricrea il progetto in Android Studio per sincronizzare queste modifiche.

Aggiungi una mappa alla tua app

L'esempio seguente mostra come utilizzare il componibile GoogleMap per aggiungere una mappa. 

val singapore = LatLng(1.35, 103.87)
val singaporeMarkerState = rememberUpdatedMarkerState(position = singapore)
val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(singapore, 10f)
}
GoogleMap(
    modifier = Modifier.fillMaxSize(),
    cameraPositionState = cameraPositionState,
) {
    Marker(
        state = singaporeMarkerState,
        title = "Singapore",
        snippet = "Marker in Singapore",
    )
}

In questo esempio, la mappa occupa lo spazio massimo consentito e la sua fotocamera è centrata su Singapore. Viene inoltre creato e fornito un CameraPositionState in cameraPositionState per impostare la posizione della fotocamera.

L'esempio chiama poi il componibile Marker nei contenuti della mappa per aggiungere un indicatore alla mappa.

Per confrontare questo esempio con un esempio che aggiunge una mappa utilizzando le visualizzazioni, consulta la QuickStart. Nota come le funzioni componibili richiedono meno codice e non devi preoccuparti del ciclo di vita della mappa.

Imposta le proprietà su una mappa

Puoi impostare le proprietà sulla mappa fornendo un oggetto MapProperties o un oggetto MapUiSettings per le proprietà relative alla UI. Puoi modificare questi oggetti per attivare la ricomposizione della mappa.

Nell'esempio seguente, utilizza un Switch, un componente di Material Design, per attivare/disattivare i controlli di zoom sulla mappa.

var uiSettings by remember { mutableStateOf(MapUiSettings()) }
var properties by remember {
    mutableStateOf(MapProperties(mapType = MapType.SATELLITE))
}

Box(Modifier.fillMaxSize()) {
    GoogleMap(
        modifier = Modifier.matchParentSize(),
        properties = properties,
        uiSettings = uiSettings,
    )
    Switch(
        checked = uiSettings.zoomControlsEnabled,
        onCheckedChange = {
            uiSettings = uiSettings.copy(zoomControlsEnabled = it)
        },
    )
}

Passaggi successivi