ไลบรารี Maps Compose

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

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

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

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

จากนั้นตัวอย่างจะเรียกใช้ 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)
    }
  )
}

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