Biblioteka tworzenia Map

Jetpack Compose to deklaratywny, natywny zestaw narzędzi do tworzenia interfejsu, który upraszcza i przyspiesza tworzenie interfejsu. W Jetpack Compose opisujesz, jak ma wyglądać Twoja aplikacja, a resztą zajmuje się Jetpack Compose.

Biblioteka Maps Compose dla pakietu Maps SDK na Androida to zestaw funkcji typu „composable” o otwartym kodzie źródłowym i typów danych, których możesz używać z Jetpack Compose do tworzenia aplikacji.

Biblioteka Maps Compose zawiera funkcje typu „composable” i typy danych, które umożliwiają wykonywanie wielu typowych zadań. Oto niektóre z najczęściej używanych funkcji typu „composable” i typów danych:

Composable Opis
Circle Funkcja typu „composable” do dodawania okręgu do mapy.
GoogleMap Funkcja typu „composable” do dodawania mapy.
GroundOverlay Funkcja typu „composable” do dodawania nakładki na mapę.
MapProperties Typ danych właściwości, które można modyfikować na mapie.
MapUISettings Typ danych ustawień związanych z interfejsem na mapie.
Marker Funkcja typu „composable” do dodawania znacznika do mapy.
Polygon Funkcja typu „composable” do dodawania wielokąta do mapy.
Polyline Funkcja typu „composable” do dodawania linii łamanej do mapy.
TileOverlay Funkcja typu „composable” do dodawania nakładki kafelkowej do mapy.

Pełną listę wszystkich funkcji typu „composable” i typów danych znajdziesz w dokumentacji biblioteki Maps Compose.

Wymagania

Aby używać biblioteki Maps Compose z pakietem Maps SDK na Androida, musisz:

  • pobrać i zainstalować Android Studio Arctic Fox;

  • utworzyć projekt Map Google w Android Studio:

    • z typem szablonu Empty Compose Activity; ten szablon dodaje zależności wymagane przez Jetpack Compose;
    • z minimalnym pakietem SDK ustawionym na Android API Level 23 („Marshmallow”; Android 6.0) lub nowszym;
    • z językiem ustawionym na Kotlin;

  • uzyskać klucz interfejsu API i dodać go do projektu;

  • zainstalować bibliotekę Maps Compose w projekcie zgodnie z opisem w następnej sekcji.

Instalacja

Aby zainstalować bibliotekę Maps Compose w projekcie Map Google:

  1. Dodaj te zależności do pliku build.gradle.kts na poziomie modułu:

      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. Aby zsynchronizować te zmiany, ponownie skompiluj projekt w Android Studio.

Dodawanie mapy do aplikacji

Ten przykład pokazuje, jak dodać mapę za pomocą funkcji typu „composable” GoogleMap. 

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

W tym przykładzie mapa zajmuje maksymalną dozwoloną przestrzeń, a jej kamera jest wyśrodkowana na Singapur. Tworzony jest też element CameraPositionState, który jest udostępniany w cameraPositionState, aby ustawić pozycję kamery.

Następnie w przykładzie wywoływana jest funkcja typu „composable” Marker w treści mapy, aby dodać do niej znacznik.

Aby porównać ten przykład z przykładem, który dodaje mapę za pomocą widoków, zapoznaj się z QuickStart. Zwróć uwagę, że funkcje typu „composable” wymagają mniej kodu i nie musisz się martwić cyklem życia mapy.

Ustawianie właściwości na mapie

Właściwości na mapie możesz ustawić, podając obiekt MapProperties lub obiekt MapUiSettings w przypadku właściwości związanych z interfejsem. Możesz modyfikować te obiekty, aby wywołać ponowne komponowanie mapy.

W poniższym przykładzie użyj przełącznika, komponentu Material Design, aby włączyć lub wyłączyć elementy sterujące powiększeniem na mapie.

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

Co dalej?