Biblioteka tworzenia Map

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

Biblioteka Maps Compose w pakiecie SDK Maps na Androida to zestaw funkcji kompozytowych open source i typów danych, 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 często używane funkcje i typy danych:

Możliwość łączenia Opis
Krąg Funkcja kompozytowa służąca do dodawania koła do mapy.
GoogleMap Funkcja kompozytowa do dodawania mapy.
GroundOverlay Funkcja kompozytowa 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 dodawania znacznika do mapy.
Polygon Funkcja składana służąca do dodawania wielokąta do mapy.
Polilinia Funkcja składana służąca do dodawania na mapie wielokąta.
TileOverlay Funkcja kompozytowa umożliwiająca dodanie na mapie nakładki z kafelkami.

Pełną listę wszystkich funkcji i typów danych do składania znajdziesz w artykule Referencje do biblioteki Maps Compose.

Wymagania

Aby używać biblioteki Compose Map w pakiecie SDK Map Google 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. Ten szablon dodaje 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ę Compose Map w projekcie zgodnie z instrukcjami podanymi w następnej sekcji.

Instalacja

Aby zainstalować bibliotekę Compose w Mapach Google w projekcie Mapy 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 za pomocą komponentu GoogleMap dodać mapę. 

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 wyśrodkowana na Singapurze. W cameraPositionState tworzony i przekazywany jest też stan CameraPositionState, który służy do ustawiania pozycji kamery.

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

Aby porównać ten przykład z przykładem dodawania mapy za pomocą widoków, zapoznaj się z QuickStart. Zauważ, że składane funkcje wymagają mniej kodu, a Ty nie musisz się martwić cyklem życia mapy.

Ustawianie właściwości na mapie

Właściwości mapy 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, czyli elementu interfejsu 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?