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ą:
Composable | 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 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. |
Wielokąt | 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 i typów danych do łączenia znajdziesz w artykule Referencje do 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.
- Minimalna wersja pakietu SDK ustawiona na API 21: Android 5.0 (Lollipop) lub nowszą.
- 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:
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") }
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 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ń i jej kamerę
wokół Singapuru. W cameraPositionState
tworzony i przekazywany jest też stan CameraPositionState, który określa położenie kamery.
Następnie przykład wywołuje komponent Marker 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 modyfikować te obiekty, aby wywołać ponowne skompilowanie mapy.
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?
- Wyświetl bibliotekę Maps Compose Strona projektu GitHub.
- Zobacz dokumentację Jetpack Compose.