ไลบรารี Maps Compose

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

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

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

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

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

ข้อกำหนด

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

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

  • สร้างโปรเจ็กต์ Google Maps ใน Android Studio ด้วยสิ่งต่อไปนี้

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

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

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

การติดตั้ง

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

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

      dependencies {


    // Android Maps Compose composables for the Maps SDK for Android
    implementation 'com.google.maps.android:maps-compose:4.3.3'
}

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

เพิ่มแผนที่ลงในแอปของคุณ

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

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

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

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

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

ตั้งค่าที่พักบนแผนที่

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

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

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

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