ไลบรารี Maps Compose

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

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

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

Composable คำอธิบาย
วงกลม ฟังก์ชันที่ใช้ร่วมกันได้เพื่อเพิ่มวงกลมลงในแผนที่
GoogleMap ฟังก์ชันที่ใช้ร่วมกันได้เพื่อเพิ่มแผนที่
GroundOverlay ฟังก์ชันที่ใช้ร่วมกันได้เพื่อเพิ่มภาพซ้อนทับพื้นลงในแผนที่
MapProperties ประเภทข้อมูลสำหรับพร็อพเพอร์ตี้ที่แก้ไขได้ในแผนที่
MapUISettings ประเภทข้อมูลสำหรับการตั้งค่าที่เกี่ยวข้องกับ UI บนแผนที่
เครื่องหมาย ฟังก์ชันที่ใช้ร่วมกันได้เพื่อเพิ่มเครื่องหมายลงในแผนที่
Polygon ฟังก์ชันที่ประกอบได้เพื่อเพิ่มรูปหลายเหลี่ยมลงในแผนที่
เส้นประกอบ ฟังก์ชันที่ประกอบได้เพื่อเพิ่มเส้นหลายเส้นลงในแผนที่
TileOverlay ฟังก์ชันที่ใช้ร่วมกันได้เพื่อเพิ่มการวางซ้อนไทล์ลงในแผนที่

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

ข้อกำหนด

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

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

  • สร้างโปรเจ็กต์ Google Maps ใน Android Studio โดยใช้ข้อมูลต่อไปนี้

    • เทมเพลตประเภทกิจกรรมการเขียนเปล่า เทมเพลตนี้จะเพิ่ม การอ้างอิงที่จำเป็นซึ่ง Jetpack Compose ต้องการ
    • SDK ขั้นต่ำที่ตั้งค่าเป็น API 21: Android 5.0 (Lollipop) ขึ้นไป
    • ตั้งค่าภาษาเป็น Kotlin

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

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

การติดตั้ง

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

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

      dependencies {

    // Android Maps Compose composables for the Maps SDK for Android
    implementation("com.google.maps.android:maps-compose:6.12.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 เพื่อตั้งค่าตำแหน่งของกล้องด้วย

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

หากต้องการเปรียบเทียบตัวอย่างนี้กับตัวอย่างที่เพิ่มแผนที่โดยใช้ Views โปรดดู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)
    }
  )
}

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