ไลบรารี Maps Compose

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

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

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

      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 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 ด้วยเพื่อตั้งค่าตำแหน่งของกล้อง

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

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

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