Android Academy · Lekcja

Markery i kamera

Umieszczaj markery i przesuwaj kamerę

Markery i kamera to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 3 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.

Oznaczanie mapy

Pusta mapa to tylko kafelki. Markery zamieniają ją w źródło informacji — mogą wskazywać sklep, restaurację lub cel podróży użytkownika. Kamera przesuwa widoczny obszar tam, gdzie wymaga tego prezentowana historia.

W tej lekcji doda Pan/Pani markery, dostosuje je, pogrupuje w klastry i płynnie animuje kamerę między miejscami.

Dodawanie markera

W maps-compose markery są composable umieszczanymi wewnątrz lambdy zawartości GoogleMap. Każdy Marker przyjmuje MarkerState przechowujący jego pozycję.

import com.google.maps.android.compose.Marker
import com.google.maps.android.compose.rememberMarkerState

@Composable
fun MapWithMarker() {
    val position = LatLng(37.7749, -122.4194)
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        Marker(
            state = rememberMarkerState(position = position),
            title = "San Francisco",
            snippet = "Welcome to SF"
        )
    }
}

Tytuł, fragment i okna informacji

title i snippet pojawiają się w domyślnym oknie informacji, gdy użytkownik dotknie markera. Dotknięcie wyświetla pogrubiony tytuł, a pod nim fragment.

Aby uzyskać pełną kontrolę, można przekazać MarkerInfoWindow z własną zawartością composable.

Marker(
    state = rememberMarkerState(position = LatLng(48.8584, 2.2945)),
    title = "Eiffel Tower",
    snippet = "Paris, France",
    // The info window pops up on tap by default
)

Dostosowywanie ikony markera

Przekaż BitmapDescriptor za pomocą parametru icon, aby zmienić wygląd markera. defaultMarker(hue) zmienia kolor standardowej pinezki; można również utworzyć ikonę na podstawie obiektu drawable.

import com.google.android.gms.maps.model.BitmapDescriptorFactory

Marker(
    state = rememberMarkerState(position = LatLng(35.6895, 139.6917)),
    title = "Tokyo",
    icon = BitmapDescriptorFactory.defaultMarker(
        BitmapDescriptorFactory.HUE_AZURE
    )
)

Wiele markerów z danych

Rzeczywiste aplikacje renderują markery na podstawie listy. Iteruj po danych wewnątrz zawartości mapy i emituj obiekt Marker dla każdego elementu. Użyj stabilnego klucza dla każdego elementu.

data class Place(val name: String, val latLng: LatLng)

@Composable
fun PlacesMap(places: List<Place>) {
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        places.forEach { place ->
            Marker(
                state = rememberMarkerState(position = place.latLng),
                title = place.name
            )
        }
    }
}

Obsługa kliknięć markerów

Każdy Marker przyjmuje lambdę onClick. Zwróć true, aby obsłużyć zdarzenie i ukryć domyślne okno informacji, lub false, aby uruchomić domyślne zachowanie.

Marker(
    state = rememberMarkerState(position = LatLng(40.7128, -74.0060)),
    title = "New York",
    onClick = {
        // handle the tap, e.g. open a detail screen
        true // consume the event
    }
)

Natychmiastowe przesuwanie kamery

Aby przesunąć widoczny obszar bez animacji, ustaw pozycję kamery bezpośrednio w CameraPositionState. Jest to gwałtowne przejście — mapa natychmiast przenosi się w nowe miejsce.

val cameraPositionState = rememberCameraPositionState()

// Instant move
cameraPositionState.position = CameraPosition.fromLatLngZoom(
    LatLng(51.5074, -0.1278), // London
    14f
)

Animowanie kamery

Aby uzyskać dopracowany efekt, animuj kamerę za pomocą animate(). Jest to wywołanie zawieszające, dlatego uruchom je w zakresie coroutine. Użyj CameraUpdate, aby opisać cel.

import com.google.android.gms.maps.CameraUpdateFactory

val scope = rememberCoroutineScope()
Button(onClick = {
    scope.launch {
        cameraPositionState.animate(
            CameraUpdateFactory.newLatLngZoom(
                LatLng(48.8566, 2.3522), 13f
            ),
            durationMs = 1000
        )
    }
}) { Text("Fly to Paris") }

Dopasowywanie wielu markerów

Aby jednocześnie wyświetlić kilka markerów, utwórz LatLngBounds obejmujący je wszystkie, a następnie animuj kamerę do tego obszaru za pomocą newLatLngBounds i marginesu podanego w pikselach.

import com.google.android.gms.maps.model.LatLngBounds

val bounds = LatLngBounds.Builder().apply {
    places.forEach { include(it.latLng) }
}.build()

scope.launch {
    cameraPositionState.animate(
        CameraUpdateFactory.newLatLngBounds(bounds, 100) // 100px padding
    )
}

Grupowanie wielu markerów

Setki markerów zasłaniają mapę. Biblioteka maps-compose-utils udostępnia Clustering, które grupuje pobliskie markery w pojedynczy bąbelek rozdzielający się podczas powiększania mapy.

import com.google.maps.android.compose.clustering.Clustering

@Composable
fun ClusteredMap(items: List<MyClusterItem>) {
    GoogleMap(modifier = Modifier.fillMaxSize()) {
        Clustering(items = items)
    }
}

Odczytywanie stanu kamery

Można również odczytywać stan kamery. cameraPositionState.position udostępnia bieżący cel i poziom powiększenia, a isMoving informuje, czy użytkownik aktualnie przesuwa mapę. Jest to przydatne do leniwego ładowania danych tylko dla widocznego obszaru.

LaunchedEffect(cameraPositionState.isMoving) {
    if (!cameraPositionState.isMoving) {
        val center = cameraPositionState.position.target
        // fetch data near `center`
    }
}

Szybkie sprawdzenie

Chce Pan/Pani, aby kamera płynnie przesunęła się do nowej lokalizacji w ciągu jednej sekundy, zamiast natychmiast tam przeskoczyć. Które rozwiązanie jest poprawne?

Podsumowanie

Potrafi już Pan/Pani uczynić mapę informacyjną i dynamiczną:

Umieszczać composable Marker w zawartości GoogleMap, używając title, snippet i niestandardowego icon.
Renderować markery z listy danych i obsługiwać onClick.
Przesuwać kamerę natychmiast za pomocą position lub płynnie za pomocą animate().
Dopasowywać widok do wielu punktów za pomocą LatLngBounds i zmniejszać ich zagęszczenie za pomocą Clustering.

W następnej części poprosi Pan/Pani o uprawnienia do lokalizacji we właściwy sposób, aby wszystko działało na prawdziwych urządzeniach.

Często zadawane pytania

Czy lekcja „Markery i kamera” jest bezpłatna?

Tak — pełny tekst „Markery i kamera” 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 „Markery i kamera”?

Umieszczaj markery i przesuwaj kamerę Ć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 3 z 4.

Ile czasu zajmuje lekcja „Markery i kamera”?

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

← Powrót do Android Academy