Biblioteka tworzenia Map

Jetpack Compose to deklaratywny, natywny pakiet narzędzi UI, który upraszcza i przyspiesza tworzenie interfejsu użytkownika. W Jetpack Compose możesz określić wygląd swojej aplikacji, a potem pozwolić Jetpack Compose do wykorzystania.

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

Biblioteka tworzenia wiadomości w Mapach Google zawiera funkcje wieloskładnikowe i typy danych, które pozwalają wykonywać wiele typowych zadań. Do powszechnie używanych funkcji i typów danych należą:

Funkcja kompozycyjna Opis
Krąg Funkcja kompozycyjna umożliwiająca dodawanie okręgu do mapy.
GoogleMap Funkcja kompozycyjna, która pozwala dodać mapę.
GroundOverlay Funkcja kompozycyjna służąca do dodawania do mapy nakładki na ziemi.
MapProperties Typ danych dla usług, które można modyfikować na mapie.
MapUISettings Typ danych do ustawień związanych z interfejsem na mapie.
Znacznik Funkcja kompozycyjna umożliwiająca dodawanie znacznika do mapy.
Wielokąt Funkcja wieloskładnikowa służąca do dodawania do mapy wielokąta.
Linia łamana Funkcja wieloskładnikowa służąca do dodawania linii łamanej do mapy.
TileOverlay Funkcja kompozycyjna, która pozwala dodać do mapy nakładkę z kafelkami.

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

Wymagania

Aby korzystać z biblioteki Maps Compose w ramach pakietu SDK Maps 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 wartość SDK ustawiona na API 21: Android 5.0 (Lollipop) lub nowszy.
    • Język ustawiony na Kotlin.

  • Uzyskaj klucz interfejsu API i dodaj go do projektu.

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

Instalacja

Aby zainstalować bibliotekę tworzenia Map Google 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.0'
}

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

Dodawanie mapy do aplikacji

Poniższy przykład pokazuje, jak dodać mapę za pomocą obiektu 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 jej aparat jest wyśrodkowany wokół Singapuru. Tworzony jest również parametr CameraPositionState, który dostarcza element w komponencie cameraPositionState do ustawiania pozycji kamery.

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

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

Ustaw właściwości na mapie

Właściwości na mapie możesz ustawić, 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 poniższym przykładzie użyj Switch, 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