Libreria di Maps

Jetpack Compose è un toolkit per UI native dichiarativo che semplifica e accelera lo sviluppo di UI. Con Jetpack Compose, descrivi come vuoi che sia la tua app e poi lascia che sia Jetpack Compose a gestire il resto.

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

La libreria Maps Compose contiene funzioni e tipi di dati componibili che ti consentono di eseguire molte attività comuni. Alcune funzioni componibili e tipi di dati di uso comune includono:

Componibile Descrizione
Cerchia Funzione componibile per aggiungere un cerchio a una mappa.
GoogleMap Funzione componibile per aggiungere una mappa.
GroundOverlay Funzione componibile per aggiungere una sovrapposizione del suolo 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 all'interfaccia utente 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 e i tipi di dati componibili, consulta la documentazione di riferimento sulla 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 Google Maps in Android Studio con:

    • Un tipo di modello Attività di composizione vuota. Questo modello aggiunge le dipendenze necessarie richieste da Jetpack Compose.
    • SDK minimo impostato su API 21: Android 5.0 (Lollipop) o versioni successive.
    • Lingua impostata 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 {

    // Android Maps Compose composables for the Maps SDK for Android
    implementation("com.google.maps.android:maps-compose:6.1.0")
}

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

Aggiungi una mappa alla tua app

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

val singapore = LatLng(1.35, 103.87)
val singaporeMarkerState = rememberMarkerState(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 fotocamera è centrata su Singapore. In cameraPositionState viene anche creato e fornito un CameraPositionState per impostare la posizione della videocamera.

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

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

Impostare le proprietà su una mappa

Puoi impostare le proprietà sulla mappa fornendo un oggetto MapProperties o un oggetto MapUiSettings per le proprietà relative all'interfaccia utente. Puoi modificare questi oggetti per attivare la ricompozione della mappa.

Nell'esempio seguente, utilizza un pulsante di attivazione/disattivazione, un componente Material Design, per attivare/disattivare i controlli dello 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