Libreria di Maps

Jetpack Compose è un toolkit nativo dichiarativo che semplifica e accelera sviluppo di UI. Con Jetpack Compose, descrivi l'aspetto della tua app e lasciare che sia Jetpack Compose a occuparsi del resto.

La libreria Maps Compose per Maps SDK for Android è un insieme di funzioni componibili open source e i 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 consentono esegui molte attività comuni. Alcune funzioni componibili di uso comune e tipi di dati 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 una sovrapposizione di riquadri a una mappa.

Per un elenco completo di tutte le funzioni componibili e i tipi di dati, vedi Riferimento per la libreria Maps Compose.

Requisiti

Per utilizzare la libreria Maps Compose con l'SDK Maps per Android, devi:

  • Scarica e installare Android Studio Arctic Fox.

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

    • Un tipo di modello dell'attività di scrittura vuota. Questo modello aggiunge gli elementi necessari delle dipendenze richieste da Jetpack Compose.
    di Gemini Advanced.
    • SDK minimo impostato su API 21: Android 5.0 (Lollipop) o versioni successive.
    • Lingua impostata su Kotlin.

  • Ottenere una chiave API e aggiungerla al 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 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. Ricrea il progetto in Android Studio per sincronizzare queste modifiche.

Aggiungi una mappa alla tua app

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

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

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

L'esempio chiama quindi Indicatore componibili nei contenuti della mappa per aggiungere un indicatore alla mappa.

Per confrontare questo esempio con un esempio di aggiunta di una mappa utilizzando le viste, consulta la QuickStart. Nota quanto sia componibile richiede 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 valore MapProperties o un oggetto MapUiSettings per relative all'interfaccia utente. Puoi modificare questi oggetti per attivare la ricomposizione la mappa.

Nell'esempio riportato di seguito, utilizza Switch, un componente 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