Jetpack Compose คือชุดเครื่องมือ UI ในตัวแบบประกาศชัดเจนที่ช่วยลดความซับซ้อนและเร่งการพัฒนา UI เมื่อใช้ Jetpack Compose คุณจะอธิบายลักษณะของแอป แล้วให้ Jetpack Compose จัดการส่วนที่เหลือให้
ไลบรารีของ Maps Compose สำหรับ Maps SDK สำหรับ Android คือชุดฟังก์ชันที่ประกอบได้แบบโอเพนซอร์สและประเภทข้อมูลที่ใช้กับ Jetpack Compose เพื่อสร้างแอปได้
ไลบรารีของ Maps Compose มีฟังก์ชันที่ประกอบกันได้และประเภทข้อมูลที่ช่วยให้คุณทำงานทั่วไปต่างๆ ได้ ฟังก์ชันและประเภทข้อมูลที่ประกอบได้ที่ใช้กันโดยทั่วไปมีดังนี้
เขียนได้ | คำอธิบาย |
---|---|
แวดวง | ฟังก์ชันประกอบเพื่อเพิ่มวงกลมลงในแผนที่ |
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
เพิ่มทรัพยากร Dependency ต่อไปนี้ลงในไฟล์
build.gradle
ระดับโมดูลdependencies { // Android Maps Compose composables for the Maps SDK for Android implementation 'com.google.maps.android:maps-compose:6.1.0' }
สร้างโปรเจ็กต์ใหม่ใน Android Studio เพื่อซิงค์การเปลี่ยนแปลงเหล่านี้
เพิ่มแผนที่ลงในแอปของคุณ
ตัวอย่างต่อไปนี้แสดงวิธีใช้ 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
ด้วยเพื่อตั้งค่าตำแหน่งของกล้อง
ตัวอย่างนี้จะเรียก Marker ที่เขียนได้ด้วย Compose ได้ในเนื้อหาของแผนที่ เพื่อเพิ่มเครื่องหมายลงในแผนที่
หากต้องการเปรียบเทียบตัวอย่างนี้กับตัวอย่างที่เพิ่มแผนที่โดยใช้ View โปรดดู QuickStart โปรดสังเกตว่าฟังก์ชัน Composable ต้องใช้โค้ดน้อยกว่า และคุณไม่ต้องกังวลเกี่ยวกับวงจรของแผนที่
ตั้งค่าที่พักบนแผนที่
คุณสามารถตั้งค่าพร็อพเพอร์ตี้บนแผนที่โดยการระบุออบเจ็กต์ MapProperties หรือออบเจ็กต์ MapUiSettings สำหรับพร็อพเพอร์ตี้ที่เกี่ยวข้องกับ UI คุณแก้ไขออบเจ็กต์เหล่านี้เพื่อทริกเกอร์การจัดองค์ประกอบแผนที่ใหม่
ในตัวอย่างด้านล่าง ใช้สวิตช์ ซึ่งเป็นคอมโพเนนต์ดีไซน์ 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) } ) }
ขั้นตอนถัดไป
- ดูไลบรารี Maps Compose หน้าโปรเจ็กต์ GitHub
- ดูเอกสารประกอบเกี่ยวกับ Jetpack Compose