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 Jetpack Compose zajmie się resztą.

biblioteki Maps Compose, w pakiecie Maps SDK na Androida to zestaw funkcji open source, które można komponować i typów danych, których możesz używać w Jetpack Compose do tworzenia aplikacji.

Biblioteka Maps Compose zawiera funkcje kompozycyjne i typy danych, które pozwalają podczas wykonywania wielu typowych zadań. Niektóre z najczęściej używanych funkcji kompozycyjnych i typów danych, które obejmują:

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.
Polyline 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 artykule Dokumentacja biblioteki Maps Compose

Wymagania

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

  • Pobierz i zainstaluj Androida Studio Arctic Fox.

  • Tworzenie projektu Map Google w Android Studio za pomocą:

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

  • Klucz interfejsu API i dodaj ją do 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:6.1.0'
}

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

Dodaj mapę do aplikacji

Poniższy przykład pokazuje, jak używać atrybutu GoogleMap kompozycyjny, aby dodać mapę. 

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ń i jej kamerę wokół Singapuru. Utworzony i przekazywany w cameraPositionState także parametr CameraPositionState służy do ustawiania pozycji kamery.

Następnie w przykładzie wywołuje funkcję Znacznik kompozycyjne w treści mapy, aby dodać do niej znacznik.

Aby porównać ten przykład z przykładem dodawania mapy za pomocą Widoki, zapoznaj się z QuickStart: Zwróć uwagę, że funkcja kompozycyjna wymaga mniej kodu i nie musisz się martwić cyklem życia mapy.

Ustawianie właściwości na mapie

Aby ustawić właściwości na mapie, podaj MapProperties lub obiekt MapUiSettings dla Właściwości związane z interfejsem użytkownika. Możesz zmodyfikować te obiekty, aby wywołać zmianę kompozycji mapę.

W poniższym przykładzie użyjemy Przełącznika, komponentu Material Design, aby przełą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?