Android Academy · Pelajaran

Penanda dan Kamera

Tempatkan penanda dan gerakkan kamera.

Penanda dan Kamera adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.

Menandai Peta

Peta kosong hanyalah ubin. Penanda mengubahnya menjadi informasi — pin untuk toko, restoran, atau tujuan pengguna. Kamera juga memindahkan area tampilan ke tempat yang diperlukan.

Dalam pelajaran ini, Anda akan menambahkan penanda, menyesuaikannya, mengelompokkannya, dan menganimasikan kamera dengan mulus di antara berbagai tempat.

Menambahkan Penanda

Dalam maps-compose, penanda adalah komposabel yang Anda tempatkan di dalam lambda konten GoogleMap. Setiap Marker menerima MarkerState yang menyimpan posisinya.

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"
        )
    }
}

Judul, Cuplikan, dan Jendela Info

title dan snippet muncul di jendela info bawaan saat pengguna mengetuk penanda. Ketukan tersebut menampilkan judul dengan huruf tebal dan cuplikan di bawahnya.

Untuk kendali penuh, Anda dapat menyediakan MarkerInfoWindow dengan konten komposabel Anda sendiri.

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

Menyesuaikan Ikon Penanda

Teruskan BitmapDescriptor melalui parameter icon untuk mengubah tampilan penanda. defaultMarker(hue) mengubah warna pin standar; Anda juga dapat membuatnya dari 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
    )
)

Banyak Penanda dari Data

Aplikasi nyata menampilkan penanda dari sebuah daftar. Ulangi data Anda di dalam konten peta dan hasilkan satu Marker untuk setiap item. Gunakan kunci stabil untuk setiap item.

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
            )
        }
    }
}

Menangani Ketukan pada Penanda

Setiap Marker menerima lambda onClick. Kembalikan true untuk menggunakan peristiwa tersebut (sehingga jendela info bawaan tidak ditampilkan) atau false agar perilaku bawaan berjalan.

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
    }
)

Memindahkan Kamera Seketika

Untuk memindahkan area tampilan tanpa animasi, tetapkan posisi kamera secara langsung pada CameraPositionState. Ini adalah perpindahan mendadak — peta seolah-olah berpindah secara teleportasi.

val cameraPositionState = rememberCameraPositionState()

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

Menganimasikan Kamera

Untuk pengalaman yang lebih halus, animasikan kamera dengan animate(). Ini adalah pemanggilan penangguhan, jadi jalankan dari lingkup coroutine. Gunakan CameraUpdate untuk menjelaskan targetnya.

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") }

Menyesuaikan Tampilan dengan Banyak Penanda

Untuk menampilkan beberapa penanda sekaligus, buat LatLngBounds yang mencakup semuanya, lalu animasikan kamera ke area tersebut dengan newLatLngBounds dan jarak tepi dalam piksel.

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
    )
}

Mengelompokkan Banyak Penanda

Ratusan penanda dapat memenuhi peta hingga sulit dibaca. Pustaka maps-compose-utils menyediakan Clustering, yang mengelompokkan penanda berdekatan menjadi satu gelembung yang terurai saat Anda memperbesar.

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

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

Membaca Status Kamera

Anda juga dapat membaca kamera. cameraPositionState.position memberikan target dan pembesaran saat ini, sedangkan isMoving memberi tahu apakah pengguna sedang menggeser peta. Ini berguna untuk memuat data secara malas hanya untuk wilayah yang terlihat.

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

Pemeriksaan Singkat

Anda ingin kamera meluncur dengan mulus ke lokasi baru selama satu detik, bukan berpindah secara mendadak. Manakah yang benar?

Rangkuman

Sekarang Anda dapat membuat peta yang informatif dan dinamis:

Tempatkan komposabel Marker di dalam konten GoogleMap, dengan title, snippet, dan icon khusus.
Tampilkan penanda dari daftar data dan tangani onClick.
Pindahkan kamera seketika melalui position, atau dengan mulus melalui animate().
Sesuaikan tampilan banyak titik dengan LatLngBounds dan kurangi kepadatan menggunakan Clustering.

Berikutnya: meminta izin lokasi dengan cara yang benar agar semua ini berfungsi pada perangkat nyata.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penanda dan Kamera” gratis?

Ya — teks lengkap “Penanda dan Kamera” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penanda dan Kamera”?

Tempatkan penanda dan gerakkan kamera. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Android Academy?

Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Penanda dan Kamera” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy