ไลบรารี Maps Compose

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

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

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

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

ดูรายการฟังก์ชันที่เน้นสร้างส่วนประกอบขนาดเล็กและประเภทข้อมูลทั้งหมดได้ที่ ข้อมูลอ้างอิงไลบรารี 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 {

    // Android Maps Compose composables for the Maps SDK for Android
    implementation("com.google.maps.android:maps-compose:6.12.0")
}

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

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

ตัวอย่างต่อไปนี้แสดงวิธีใช้ 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 Composable ในเนื้อหาของแผนที่เพื่อเพิ่มเครื่องหมายลงในแผนที่

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

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

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