Biblioteka tworzenia Map

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

Biblioteka Maps Compose dla pakietu SDK Map Google na Androida to zestaw funkcji kompozycyjnych typu open source i typów danych, których możesz użyć przy tworzeniu aplikacji w Jetpack Compose.

Biblioteka tworzenia wiadomości w Mapach Google zawiera funkcje kompozycyjne i typy danych, które pozwalają wykonywać wiele typowych zadań. Oto niektóre z najczęściej używanych funkcji kompozycyjnych i typów danych:

Funkcja kompozycyjna 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 do mapy warstwy terenu.
MapProperties Typ danych usług, które można modyfikować na mapie.
MapUISettings Typ danych do 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, która pozwala dodać do mapy linię łamaną.
TileOverlay Funkcja kompozycyjna, która pozwala dodać do mapy nakładkę z kafelkami.

Pełną listę wszystkich funkcji kompozycyjnych i typów danych znajdziesz w dokumentacji biblioteki tworzenia wiadomości w Mapach Google.

Wymagania

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

  • Pobierz i zainstaluj Androida Studio Arctic Fox.

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

    • Typ szablonu Aktywność związana z tworzeniem pustego konta. Ten szablon dodaje zależności wymagane przez Jetpack Compose.
    • Minimalny pakiet SDK ustawiony na API 21: Android 5.0 (Lollipop) lub nowszy.
    • Język ustawiony na Kotlin.

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

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

Instalacja

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

  1. Dodaj te zależności do pliku build.gradle na poziomie modułu:

      dependencies {


    // Android Maps Compose composables for the Maps SDK for Android
    implementation 'com.google.maps.android:maps-compose:4.3.3'
}

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

Dodawanie mapy do aplikacji

Poniższy przykład pokazuje, jak za pomocą funkcji GoogleMap kompozycyjnej 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 maksymalny dozwolony obszar, a kamera jest skupiona wokół Singapuru. W cameraPositionState jest też tworzony parametr CameraPositionState do ustawiania pozycji kamery.

Następnie wywołuje w treści mapy znacznik kompozycyjny, by dodać do niej znacznik.

Aby porównać ten przykład z przykładem dodawania mapy za pomocą widoków, przeczytaj QuickStart. Zwróć uwagę, że funkcje kompozycyjne wymagają mniej kodu i nie musisz przejmować się cyklem życia mapy.

Ustawianie właściwości na mapie

Właściwości mapy możesz ustawiać na mapie, udostępniając obiekt MapProperties lub obiekt MapUiSettings dla właściwości związanych z interfejsem. Możesz modyfikować te obiekty, aby aktywować zmianę kompozycji mapy.

W przykładzie poniżej użyj Switch, komponentu Material Design, do przełączania elementów sterujących powiększeniem mapy.

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?