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