Biblioteka tworzenia Map

Jetpack Compose to deklaratywny, natywny zestaw narzędzi do tworzenia interfejsu, który upraszcza i przyspiesza tworzenie interfejsu. Dzięki 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 z kafelkami 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:

    • Typ szablonu Empty Compose Activity. Ten szablon dodaje zależności wymagane przez Jetpack Compose.
    • Minimalny pakiet SDK ustawiony na Android API Level 23 („Marshmallow”; Android 6.0) lub nowszy.
    • Język ustawiony 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 {

    // Android Maps Compose composables for the Maps SDK for Android
    implementation("com.google.maps.android:maps-compose:6.12.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 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łą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?