0Pricing
Android Academy · Lekcja

Wyświetlanie mapy

Dodaj Google Maps do swojej aplikacji

Wyświetlanie mapy to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Umieszczanie aplikacji na mapie

Mapy zamieniają surowe współrzędne w coś, co użytkownicy mogą zobaczyć i odkrywać. W tej lekcji dodadzą Państwo interaktywną Google Map do ekranu Jetpack Compose za pomocą oficjalnej biblioteki maps-compose.

Po ukończeniu lekcji będą Państwo mogli umieścić w dowolnym composable prawdziwą mapę, którą można przesuwać i powiększać. Przygotujmy podstawowe elementy.

Biblioteka Maps Compose

Google udostępnia przyjazną dla Compose nakładkę o nazwie maps-compose. Udostępnia ona composable GoogleMap, dzięki czemu nie trzeba bezpośrednio korzystać ze starszego XML-owego MapView.

Należy dodać te zależności do modułu w pliku build.gradle.kts. Artefakt play-services-maps jest bazowym SDK, a maps-compose dostosowuje je do Compose.

// build.gradle.kts (module)
dependencies {
    implementation("com.google.maps.android:maps-compose:6.1.0")
    implementation("com.google.android.gms:play-services-maps:19.0.0")
}

Uzyskiwanie klucza API

Google Maps wymaga klucza API. Należy utworzyć go w Google Cloud Console, włączyć Maps SDK for Android, a następnie umieścić klucz w pliku AndroidManifest.xml, wewnątrz znacznika <application>.

Nie należy umieszczać klucza na stałe w kodzie źródłowym, który jest publicznie zatwierdzany w repozytorium. Należy przechowywać go w local.properties i wstrzykiwać za pomocą placeholdera manifestu.

<!-- AndroidManifest.xml, inside <application> -->
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />

Pierwszy GoogleMap

Najprostsza mapa to pojedynczy composable GoogleMap. Wystarczy przekazać mu Modifier.fillMaxSize(), aby natychmiast uzyskać mapę, którą można przesuwać i powiększać.

Do wyświetlenia nie potrzebuje ona dzieci — kafelki Google są renderowane automatycznie, gdy klucz API jest prawidłowy.

import com.google.maps.android.compose.GoogleMap

@Composable
fun MapScreen() {
    GoogleMap(
        modifier = Modifier.fillMaxSize()
    )
}

Sterowanie kamerą

Kamera określa, który fragment mapy jest wyświetlany i jak bardzo jest powiększony. Należy przekazać obiekt CameraPositionState zapamiętywany między rekompozycjami.

Obiekt CameraPosition należy utworzyć na podstawie LatLng (szerokości i długości geograficznej) oraz poziomu powiększenia. Wyższy poziom powiększenia oznacza bliższy widok.

import com.google.android.gms.maps.model.CameraPosition
import com.google.android.gms.maps.model.LatLng
import com.google.maps.android.compose.rememberCameraPositionState

val sanFrancisco = LatLng(37.7749, -122.4194)
val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(sanFrancisco, 12f)
}

Podłączanie kamery do mapy

Przekaż cameraPositionState do GoogleMap, aby mapa otwierała się wyśrodkowana w wybranym miejscu. Ponieważ stan jest zapamiętywany, przesuwanie i powiększanie mapy przez użytkownika zostaje zachowane podczas rekompozycji.

@Composable
fun CenteredMap() {
    val sf = LatLng(37.7749, -122.4194)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(sf, 12f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    )
}

Właściwości mapy

MapProperties konfiguruje zawartość mapy. Typowe opcje obejmują typ mapy (standardowa, satelitarna, terenowa, hybrydowa) oraz określenie, czy niebieska kropka mojej lokalizacji jest włączona.

Proszę zapamiętać obiekt właściwości, aby nie był tworzony ponownie przy każdej rekompozycji.

import com.google.maps.android.compose.MapProperties
import com.google.maps.android.compose.MapType

val properties = remember {
    MapProperties(
        mapType = MapType.NORMAL,
        isMyLocationEnabled = false
    )
}

Ustawienia interfejsu mapy

MapUiSettings włącza i wyłącza elementy sterujące na ekranie: przyciski powiększania, kompas, przycisk mojej lokalizacji oraz gesty.

Proszę wyłączyć niepotrzebne elementy, aby uzyskać prostszy wygląd — na przykład ukryć przyciski powiększania, ale pozostawić włączony gest powiększania przez uszczypnięcie.

import com.google.maps.android.compose.MapUiSettings

val uiSettings = remember {
    MapUiSettings(
        zoomControlsEnabled = false,
        compassEnabled = true,
        scrollGesturesEnabled = true,
        zoomGesturesEnabled = true
    )
}

Połączenie wszystkich elementów

Połącz kamerę, właściwości i ustawienia interfejsu w jedną skonfigurowaną mapę. Tak zazwyczaj wygląda ekran mapy w aplikacji produkcyjnej.

@Composable
fun ConfiguredMap() {
    val sf = LatLng(37.7749, -122.4194)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(sf, 12f)
    }
    val properties = remember { MapProperties(mapType = MapType.NORMAL) }
    val uiSettings = remember { MapUiSettings(zoomControlsEnabled = false) }

    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState,
        properties = properties,
        uiSettings = uiSettings
    )
}

Reagowanie na kliknięcia mapy

GoogleMap udostępnia wywołania zwrotne, takie jak onMapClick. Użyj ich, aby reagować na dotknięcie mapy przez użytkownika — na przykład zapisać wybrane współrzędne LatLng.

Przechowuj dotknięty punkt w stanie, aby interfejs użytkownika mógł na niego reagować.

@Composable
fun ClickableMap() {
    var picked by remember { mutableStateOf<LatLng?>(null) }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        onMapClick = { latLng -> picked = latLng }
    )
    picked?.let { p ->
        Text("Picked: ${p.latitude}, ${p.longitude}")
    }
}

Cykl życia jest obsługiwany automatycznie

W przypadku klasycznego XML-owego MapView trzeba było ręcznie przekazywać każde zdarzenie cyklu życia. Biblioteka maps-compose automatycznie łączy mapę z cyklem życia kompozycji.

Oznacza to brak ręcznego kodu obsługującego onResume/onPause/onDestroy — to kolejny powód, aby w nowych ekranach preferować API Compose.

Szybkie sprawdzenie

Jaki obiekt stanu composable należy zapamiętać i przekazać do GoogleMap, aby sterować wyśrodkowaniem i powiększeniem mapy?

Podsumowanie

Potrafi już Pan/Pani umieścić prawdziwą mapę Google w Compose:

  • Dodać maps-compose + play-services-maps oraz klucz API w manifeście.
  • Renderować mapę za pomocą composable GoogleMap.
  • Wyśrodkować mapę i ustawić jej powiększenie za pomocą rememberCameraPositionState i CameraPosition.
  • Dostosować ją za pomocą MapProperties i MapUiSettings oraz reagować na dotknięcia za pomocą onMapClick.

W następnej części pobierze Pan/Pani rzeczywistą lokalizację urządzenia, aby wyśrodkować mapę na użytkowniku.

Często zadawane pytania

Czy lekcja „Wyświetlanie mapy” jest bezpłatna?

Tak — pełny tekst „Wyświetlanie mapy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wyświetlanie mapy”?

Dodaj Google Maps do swojej aplikacji Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Wyświetlanie mapy”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Wyświetlanie mapy
  2. Pobieranie lokalizacji użytkownika
  3. Markery i kamera
  4. Prawidłowe uprawnienia do lokalizacji
← Powrót do Android Academy