Biblioteka tworzenia Map

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

Biblioteka Maps Compose w pakiecie Maps SDK na Androida to zestaw funkcji kompozycyjnych 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 kompozycyjna służąca do dodawania mapy.
GroundOverlay Funkcja kompozycyjna służąca do dodawania do mapy nakładki na teren.
MapProperties Typ danych dla 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 służąca do dodawania znacznika do mapy.
Wielokąt 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żonych do mapy.
TileOverlay Funkcja kompozycyjna służąca do dodawania nakładki z kafelkami do mapy.

Pełną listę wszystkich funkcji i typów danych do łączenia znajdziesz w artykule Informacje o bibliotece Maps Compose.

Wymagania

Aby korzystać z biblioteki Maps Compose w pakiecie 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 w projekcie bibliotekę Maps Compose 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.1.0")
}

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

Dodaj mapę 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, w którym mapa jest dodawana za pomocą widoków, zapoznaj się z artykułem Szybki start. Zwróć uwagę, że funkcje kompozytowe wymagają mniej kodu, a Ty nie musisz się martwić cyklem życia mapy.

Ustawianie właściwości na mapie

Aby ustawić właściwości na mapie, podaj obiekt MapProperties lub obiekt MapUiSettings dla właściwości związanych z interfejsem. 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ć sterowanie 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?