Biblioteka tworzenia Map

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

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

Biblioteka Maps Compose zawiera funkcje i typy danych, które umożliwiają wykonywanie wielu typowych zadań. Do najczęściej używanych funkcji kompozycyjnych i typów danych należą:

Kompozycyjne Opis
Okrąg Funkcja kompozycyjna do dodawania okręgu do mapy.
GoogleMap Funkcja kompozycyjna do dodawania mapy.
GroundOverlay Funkcja kompozycyjna do dodawania nakładki na mapę.
MapProperties Typ danych właściwości, które można modyfikować na mapie.
MapUISettings Typ danych dla ustawień związanych z interfejsem na mapie.
Znacznik Funkcja kompozycyjna do dodawania znacznika do mapy.
Wielokąt Funkcja kompozycyjna do dodawania wielokąta do mapy.
Polilinia Funkcja kompozycyjna do dodawania linii łamanej do mapy.
TileOverlay Funkcja kompozycyjna do dodawania nakładki kafelkowej do mapy.

Pełną listę wszystkich funkcji 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, który będzie zawierać:

    • Typ szablonu Empty Compose Activity. Ten szablon dodaje niezbędne zależności wymagane przez Jetpack Compose.
    • Minimalna wersja SDK ustawiona na API 21: Android 5.0 (Lollipop) lub nowszy.
    • Język ustawiony na Kotlin.

  • Uzyskaj klucz interfejsu API i dodaj go do projektu.

  • Zainstaluj w projekcie bibliotekę Maps Compose 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 {

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

  2. Aby zsynchronizować te zmiany, ponownie skompiluj projekt w Android Studio.

Dodawanie mapy do aplikacji

Poniższy przykład pokazuje, jak użyć komponentu GoogleMap, aby 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 jej kamera jest wyśrodkowana na Singapurze. Tworzony jest też obiekt CameraPositionState, który jest udostępniany w cameraPositionState w celu ustawienia pozycji kamery.

Następnie w treści mapy wywołuje komponent Marker, 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. Zwróć uwagę, że funkcje kompozycyjne wymagają mniej kodu i nie musisz się martwić o cykl życia mapy.

Ustawianie obiektów 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. Możesz modyfikować te obiekty, aby wywołać ponowne komponowanie mapy.

W przykładzie poniżej użyj przełącznika, 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?