Biblioteka tworzenia Map

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

Biblioteka Maps Compose do pakietu Maps SDK na Androida to zestaw funkcji typu „composable” i typów danych open source, 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ń. Niektóre z najczęściej używanych funkcji typu „composable” i typów danych to:

Funkcja kompozycyjna Opis
Okrąg Funkcja typu „composable” służąca do dodawania okręgu do mapy.
GoogleMap Funkcja typu „composable” do dodawania mapy.
GroundOverlay Funkcja typu „composable” służąca do dodawania nakładki naziemnej do mapy.
MapProperties Typ danych właściwości, które można modyfikować na mapie.
MapUISettings Typ danych ustawień związanych z interfejsem na mapie.
Znacznik Funkcja typu „composable” do dodawania znacznika do mapy.
Polygon Funkcja typu „composable” służąca do dodawania wielokąta do mapy.
Linia łamana Funkcja typu „composable” służąca 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:

  • Pobierz i zainstaluj Android Studio Arctic Fox.

  • Utwórz projekt Map Google w Android Studio, używając:

    • Typ szablonu Pusta aktywność Compose. Ten szablon dodaje niezbędne zależności wymagane przez Jetpack Compose.
    • Minimalna wersja pakietu SDK ustawiona na interfejs API Androida na poziomie 23 („Marshmallow”; Android 6.0) lub nowszym.
    • Language (Język) ustawiony na Kotlin.

  • Uzyskaj klucz interfejsu API i dodaj go do projektu.

  • Zainstaluj 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

Poniższy przykład pokazuje, jak dodać mapę za pomocą funkcji kompozycyjnej 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 kamera jest wyśrodkowana na Singapurze. Tworzony jest też obiekt CameraPositionState, który jest przekazywany do cameraPositionState, aby ustawić pozycję kamery.

Następnie przykład wywołuje element kompozycyjny Marker w treści mapy, aby dodać do niej znacznik.

Aby porównać ten przykład z przykładem, w którym mapa jest dodawana za pomocą widoków, zapoznaj się z QuickStart. Zauważ, że funkcje typu „composable” wymagają mniej kodu i nie musisz się martwić o cykl życia mapy.

Ustawianie właściwości na mapie

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

W przykładzie poniżej użyjemy przełącznika, czyli komponentu Material Design, aby włączać i wyłączać 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?