ไลบรารี Maps Compose

Jetpack Compose เป็นชุดเครื่องมือ UI แบบเนทีฟที่อธิบายอย่างชัดเจน ซึ่งช่วยให้การพัฒนา UI ทำได้ง่ายและเร็วขึ้น เมื่อใช้ Jetpack Compose คุณจะอธิบายลักษณะที่ต้องการให้แอปเป็น แล้วให้ Jetpack Compose จัดการส่วนที่เหลือ

ไลบรารี Maps Compose สำหรับ Maps SDK สำหรับ Android คือชุดฟังก์ชันที่ประกอบกันได้และประเภทข้อมูลแบบโอเพนซอร์สซึ่งคุณสามารถใช้กับ Jetpack Compose เพื่อสร้างแอปได้

ไลบรารี Maps Compose มีฟังก์ชันที่ประกอบกันได้และประเภทข้อมูลที่ช่วยให้คุณทำงานทั่วไปได้หลายอย่าง ฟังก์ชันที่ประกอบกันได้และประเภทข้อมูลที่ใช้กันโดยทั่วไปมีดังนี้

ดูรายการฟังก์ชันที่ประกอบกันได้และประเภทข้อมูลทั้งหมดได้ที่ข้อมูลอ้างอิงไลบรารี Maps Compose

ข้อกำหนด

หากต้องการใช้ไลบรารี Maps Compose กับ Maps SDK สำหรับ Android คุณต้องทำดังนี้

• ดาวน์โหลดและติดตั้ง Android Studio Arctic Fox

• สร้างโปรเจ็กต์ Google Maps ใน Android Studio โดยทำดังนี้

  • ประเภทเทมเพลตของ Empty Compose Activity เทมเพลตนี้จะเพิ่มทรัพยากร Dependency ที่จำเป็นซึ่ง Jetpack Compose ต้องใช้
  • SDK ขั้นต่ำตั้งค่าเป็น Android API ระดับ 23 ("Marshmallow"; Android 6.0) ขึ้นไป
  • ตั้งค่าภาษาเป็น Kotlin

• รับคีย์ API และเพิ่มลงในโปรเจ็กต์

• ติดตั้งไลบรารี Maps Compose ในโปรเจ็กต์ตามที่อธิบายไว้ในส่วนถัดไป

การติดตั้ง

วิธีติดตั้งไลบรารี Maps Compose ในโปรเจ็กต์ Google Maps

1. เพิ่มทรัพยากร Dependency ต่อไปนี้ลงในไฟล์ build.gradle.kts ระดับโมดูล

     dependencies {
   
       // Modern Android projects use version catalogs to manage dependencies. To include the Maps Compose library,
       // first add the following to your gradle/libs.versions.toml file:
       //
       // [versions]
       // mapsCompose = "8.4.0"
       //
       // [libraries]
       // maps-compose = { module = "com.google.maps.android:maps-compose", version.ref = "mapsCompose" }
       //
       // Android Maps Compose composables for the Maps SDK for Android
       implementation(libs.maps.compose)
       // If your project does not use a version catalog, you can use the following dependency instead:
       //
       //    implementation("com.google.maps.android:maps-compose:8.4.0")
   }

2. สร้างโปรเจ็กต์ใหม่ใน Android Studio เพื่อซิงค์การเปลี่ยนแปลงเหล่านี้

เพิ่มแผนที่ลงในแอป

ตัวอย่างต่อไปนี้แสดงวิธีใช้ Composable GoogleMap เพื่อเพิ่มแผนที่

val singapore = LatLng(1.35, 103.87)
val singaporeMarkerState = rememberUpdatedMarkerState(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",
    )
}

ในตัวอย่างนี้ แผนที่จะใช้พื้นที่สูงสุดที่อนุญาตและกล้องจะอยู่ตรงกลางรอบสิงคโปร์ นอกจากนี้ ระบบยังสร้างและระบุ CameraPositionState ใน cameraPositionState เพื่อตั้งค่าตำแหน่งของกล้องด้วย

จากนั้นตัวอย่างจะเรียกใช้คอมโพสิเบิล Marker ในเนื้อหาของแผนที่เพื่อเพิ่มเครื่องหมายลงในแผนที่

หากต้องการเปรียบเทียบตัวอย่างนี้กับตัวอย่างที่เพิ่มแผนที่โดยใช้มุมมอง โปรดดูQuickStart สังเกตว่าฟังก์ชันที่ประกอบกันได้ใช้โค้ดน้อยลงอย่างไร และคุณไม่ต้องกังวลเกี่ยวกับวงจรของแผนที่

ตั้งค่าพร็อพเพอร์ตี้ในแผนที่

คุณสามารถตั้งค่าพร็อพเพอร์ตี้ในแผนที่ได้โดยระบุออบเจ็กต์ MapProperties หรือออบเจ็กต์ MapUiSettings สำหรับพร็อพเพอร์ตี้ที่เกี่ยวข้องกับ UI คุณสามารถแก้ไขออบเจ็กต์เหล่านี้เพื่อทริกเกอร์การจัดองค์ประกอบใหม่ของแผนที่ได้

ในตัวอย่างด้านล่าง ให้ใช้ Switch ซึ่งเป็นคอมโพเนนต์ Material Design เพื่อเปิด/ปิดการควบคุมการซูมบนแผนที่

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

ขั้นตอนถัดไป

• ดูหน้าโปรเจ็กต์ GitHub ของไลบรารี Maps Compose
• ดูเอกสารประกอบของ Jetpack Compose