ไลบรารี Maps Compose

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

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

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

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

ดูรายการฟังก์ชันและประเภทข้อมูลที่เขียนได้ด้วยที่ประกอบกันได้ทั้งหมดที่หัวข้อ ข้อมูลอ้างอิงจากคลังของ 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 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.1.0")
}

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

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

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

val singapore = LatLng(1.35, 103.87)
val singaporeMarkerState = rememberMarkerState(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 ด้วยเพื่อตั้งค่าตำแหน่งของกล้อง

ตัวอย่างนี้เรียกเมธอด เครื่องหมาย เขียนได้ในเนื้อหาของแผนที่เพื่อเพิ่มเครื่องหมายลงในแผนที่

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

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

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

ในตัวอย่างด้านล่าง ใช้สวิตช์ ซึ่งเป็นคอมโพเนนต์ 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)
    }
  )
}

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