Library Maps Compose

Jetpack Compose adalah toolkit UI native dan deklaratif yang menyederhanakan dan mempercepat pengembangan UI. Dengan Jetpack Compose, Anda dapat mendeskripsikan tampilan aplikasi yang Anda inginkan, lalu Jetpack Compose akan menangani sisanya.

Library Maps Compose untuk Maps SDK for Android adalah kumpulan fungsi composable dan jenis data open source yang dapat Anda gunakan dengan Jetpack Compose untuk membuat aplikasi.

Library Maps Compose berisi fungsi composable dan jenis data yang memungkinkan Anda melakukan banyak tugas umum. Sebagian fungsi composable dan jenis data yang umum digunakan mencakup:

Composable Deskripsi
Circle Fungsi composable untuk menambahkan lingkaran ke peta.
GoogleMap Fungsi composable untuk menambahkan peta.
GroundOverlay Fungsi composable untuk menambahkan overlay bumi ke peta.
MapProperties Jenis data untuk properti yang dapat diubah di peta.
MapUISettings Jenis data untuk setelan terkait UI di peta.
Marker Fungsi composable untuk menambahkan penanda ke peta.
Polygon Fungsi composable untuk menambahkan poligon ke peta.
Polyline Fungsi composable untuk menambahkan polyline ke peta.
TileOverlay Fungsi composable untuk menambahkan overlay ubin ke peta.

Untuk mengetahui daftar lengkap semua fungsi composable dan jenis data, lihat referensi library Maps Compose.

Persyaratan

Untuk menggunakan library Maps Compose dengan Maps SDK for Android:

  • Download dan instal Android Studio Arctic Fox.

  • Buat project Google Maps di Android Studio dengan:

    • Jenis template Empty Compose Activity. Template ini menambahkan dependensi yang diperlukan oleh Jetpack Compose.
    • Minimum SDK ditetapkan ke API 21: Android 5.0 (Lollipop) atau yang lebih baru.
    • Language ditetapkan ke Kotlin.

  • Dapatkan kunci API dan tambahkan ke project Anda.

  • Instal library Maps Compose di project seperti yang dijelaskan di bagian berikutnya.

Penginstalan

Untuk menginstal library Maps Compose di project Google Maps Anda:

  1. Tambahkan dependensi berikut ke file build.gradle tingkat modul:

      dependencies {
    implementation 'com.google.maps.android:maps-compose:2.11.4'
    implementation 'com.google.android.gms:play-services-maps:18.1.0'
}

  2. Build ulang project Anda di Android Studio untuk menyinkronkan perubahan ini.

Menambahkan peta ke aplikasi

Contoh berikut menunjukkan cara menggunakan fungsi GoogleMap untuk menambahkan peta. 

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

Dalam contoh ini, peta menempati ruang maksimum yang diizinkan dan kameranya dipusatkan ke sekitar Singapura. CameraPositionState juga dibuat dan disediakan di cameraPositionState untuk menetapkan posisi kamera.

Contoh ini kemudian memanggil composable Marker di konten peta untuk menambahkan penanda ke peta.

Untuk membandingkan contoh ini dengan contoh yang menambahkan peta menggunakan Tampilan, lihat QuickStart. Anda dapat melihat bahwa fungsi composable memerlukan lebih sedikit kode, dan Anda tidak perlu khawatir dengan siklus proses peta.

Menetapkan properti di peta

Anda dapat menetapkan properti di peta dengan memberikan objek MapProperties, atau objek MapUiSettings untuk properti terkait UI. Anda dapat mengubah objek ini untuk memicu komposisi ulang peta.

Pada contoh di bawah, gunakan Tombol, sebuah komponen Desain Material, untuk mengalihkan kontrol zoom di peta.

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

Langkah berikutnya