Biblioteka tworzenia Map

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

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 kompozycyjne i typy danych, które pozwalają wykonywać wiele typowych zadań. Do często używanych funkcji kompozycyjnych i typów danych należą:

Składane Opis
Krąg Funkcja kompozycyjna służąca do dodawania okręgu do mapy.
GoogleMap Funkcja kompozycyjna służąca do dodawania mapy.
GroundOverlay Funkcja kompozycyjna służąca do dodawania nakładki na teren do mapy.
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 kompozycyjna służąca do dodawania wielokąta do mapy.
Linia łamana Funkcja kompozycyjna służąca do dodawania linii łamanej do mapy.
TileOverlay Funkcja kompozycyjna służąca do dodawania nakładki z kafelkami do mapy.

Pełną listę wszystkich funkcji kompozycyjnych i typów danych znajdziesz w dokumentacji biblioteki Map Google Compose.

Wymagania

Aby korzystać z biblioteki Maps Compose w pakiecie Maps SDK na Androida, musisz:

  • Pobierz i zainstaluj Androida Studio Arctic Fox.

  • Utwórz projekt Map Google w Android Studio za pomocą:

    • Typ szablonu: Pusta aktywność związana z tworzeniem wiadomości. Ten szablon dodaje niezbędne zależności wymagane przez Jetpack Compose.
    • Co najmniej pakiet SDK ustawiony na API 21: Android 5.0 (Lollipop) lub nowszy.
    • Język jest ustawiony na Kotlin.

  • Uzyskaj klucz interfejsu API i dodaj go do swojego projektu.

  • Zainstaluj bibliotekę Maps Compose w projekcie zgodnie z opisem w następnej sekcji.

Instalacja

Aby zainstalować bibliotekę Maps Compose w projekcie Map Google:

  1. Dodaj do pliku build.gradle 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:5.0.4'
}

  2. Aby zsynchronizować zmiany, odbuduj projekt w Android Studio.

Dodaj mapę do aplikacji

Z przykładu poniżej dowiesz się, jak dodać mapę za pomocą funkcji kompozycyjnej GoogleMap. 

val singapore = LatLng(1.35, 103.87)
val cameraPositionState = rememberCameraPositionState {
  position = CameraPosition.fromLatLngZoom(singapore, 10f)
}
GoogleMap(
  modifier = Modifier.fillMaxSize(),
  cameraPositionState = cameraPositionState
) {
  Marker(
    state = MarkerState(position = singapore),
    title = "Singapore",
    snippet = "Marker in Singapore"
  )
}

W tym przykładzie mapa zajmuje maksymalną dozwoloną przestrzeń, a kamera jest wyśrodkowana na Singapurze. Utworzony i przekazywany w cameraPositionState także parametr CameraPositionState służy do ustawiania pozycji kamery.

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

Aby porównać ten przykład z przykładem dodawania mapy za pomocą widoków, przeczytaj QuickStart. Zauważ, że funkcje kompozycyjne wymagają mniej kodu i nie musisz się martwić o cykl ż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 zmodyfikować te obiekty, aby aktywować ponowne kompozycje mapy.

W przykładzie poniżej użyj Switch, komponentu Material Design, by przełączyć powiększenie 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