Biblioteka tworzenia Map

Jetpack Compose to deklaratywny, natywny zestaw narzędzi do tworzenia interfejsu użytkownika, który upraszcza i przyspiesza tworzenie interfejsu. W Jetpack Compose wystarczy, że określisz, jak ma wyglądać Twoja aplikacja, a resztą zajmie się Jetpack Compose.

Biblioteka Compose Maps w pakiecie SDK Map na Androida to zestaw funkcji kompozytowych i typów danych typu open source, których możesz używać w Jetpack Compose do tworzenia aplikacji.

Biblioteka Maps Compose zawiera funkcje i typy danych, które umożliwiają wykonywanie wielu typowych zadań. Oto niektóre z powszechnie używanych funkcji i typów danych:

Kompozycja Opis
Okrąg Funkcja kompozytowa służąca do dodawania koła do mapy.
GoogleMap Funkcja kompozytowa do dodawania mapy.
GroundOverlay Funkcja kompozytowa do dodawania na mapie nakładki naziemnej.
MapProperties Typ danych właściwości, które można modyfikować na mapie.
MapUISettings Typ danych ustawień związanych z interfejsem użytkownika na mapie.
Znacznik Funkcja kompozytowa do dodawania znacznika do mapy.
Polygon Funkcja składana służąca do dodawania wielokąta do mapy.
Wielokąt Funkcja składana służąca do dodawania linii złożonej do mapy.
TileOverlay Funkcja kompozytowa do dodawania nakładki na mapę.

Pełną listę wszystkich funkcji i typów danych do łączenia znajdziesz w artykule Biblioteka Maps Compose – informacje referencyjne.

Wymagania

Aby korzystać z 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 za pomocą:

    • Typ szablonu Pusta aktywność tworzenia wiadomości. Ten szablon dodaje niezbędne zależności wymagane przez Jetpack Compose.
    • Minimalna wersja pakietu SDK ustawiona na API 21: Android 5.0 (Lollipop) lub nowszą.
    • 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ę Compose Map w projekcie Map Google:

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

      dependencies {

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

  2. Aby zsynchronizować te zmiany, ponownie utwórz projekt w Android Studio.

Dodawanie mapy do aplikacji

Ten przykład pokazuje, jak użyć komponentu GoogleMap do dodania mapy. 

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

W tym przykładzie mapa zajmuje maksymalną dozwoloną przestrzeń, a kamera jest umieszczona na środku Singapuru. W cameraPositionState tworzony i przekazywany jest też stan CameraPositionState, który służy do ustawiania pozycji kamery.

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

Aby porównać to przykład z przykładem dodawania mapy za pomocą widoków, zapoznaj się z artykułem QuickStart. Zwróć uwagę, że funkcje kompozytowe wymagają mniej kodu, a Ty 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 użytkownika. Możesz modyfikować te obiekty, aby wywołać ponowne skompilowanie mapy.

W przykładzie poniżej użyj przełącznika i komponentu Material Design, aby włączyć lub wyłączyć kontrolki powiększania 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?