Android Academy · บทเรียน

การแสดงแผนที่

เพิ่ม Google Maps ลงในแอปของคุณ

การแสดงแผนที่ เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

นำแอปของคุณขึ้นแผนที่

แผนที่เปลี่ยนพิกัดดิบให้เป็นสิ่งที่ผู้ใช้สามารถ มองเห็นและสำรวจ ได้ ในบทเรียนนี้คุณจะเพิ่ม แผนที่ Google แบบโต้ตอบลงในหน้าจอ Jetpack Compose โดยใช้ไลบรารี maps-compose อย่างเป็นทางการ

เมื่อจบบทเรียน คุณจะสามารถวางแผนที่จริงที่เลื่อนและซูมได้ลงใน composable ใดก็ได้ มาเตรียมส่วนประกอบพื้นฐานกัน

ไลบรารี Maps Compose

Google มีตัวห่อหุ้มที่รองรับ Compose ชื่อ maps-compose ซึ่งมี composable GoogleMap ให้ใช้ คุณจึงไม่ต้องแตะ XML MapView รุ่นเก่าโดยตรง

เพิ่มทรัพยากรที่ต้องพึ่งพาเหล่านี้ลงในโมดูลของคุณใน build.gradle.kts อาร์ติแฟกต์ play-services-maps คือ SDK พื้นฐาน ส่วน maps-compose ทำหน้าที่ปรับให้ใช้กับ Compose ได้

// build.gradle.kts (module)
dependencies {
    implementation("com.google.maps.android:maps-compose:6.1.0")
    implementation("com.google.android.gms:play-services-maps:19.0.0")
}

การรับคีย์ API

Google Maps ต้องใช้คีย์ API สร้างคีย์ใน Google Cloud Console เปิดใช้งาน Maps SDK for Android จากนั้นใส่คีย์ลงใน AndroidManifest.xml ภายในแท็ก <application>

อย่าเขียนคีย์แบบตายตัวไว้ในซอร์สโค้ดที่คุณเผยแพร่ต่อสาธารณะ เก็บไว้ใน local.properties และแทรกค่าโดยใช้ตัวแทนใน manifest

<!-- AndroidManifest.xml, inside <application> -->
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />

GoogleMap แรกของคุณ

แผนที่ที่ง่ายที่สุดคือ composable GoogleMap เพียงตัวเดียว กำหนด Modifier.fillMaxSize() ให้กับมัน แล้วคุณจะได้แผนที่ที่เลื่อนและซูมได้ทันที

ไม่ต้องมีองค์ประกอบลูกเพื่อแสดงผล เนื่องจากไทล์ของ Google จะแสดงผลโดยอัตโนมัติเมื่อคีย์ API ใช้งานได้

import com.google.maps.android.compose.GoogleMap

@Composable
fun MapScreen() {
    GoogleMap(
        modifier = Modifier.fillMaxSize()
    )
}

การควบคุมกล้อง

กล้อง จะกำหนดว่าแผนที่มองไปยังบริเวณใดและซูมใกล้แค่ไหน คุณต้องส่ง CameraPositionState ที่จดจำไว้ตลอดการจัดองค์ประกอบใหม่

สร้าง CameraPosition จาก LatLng (ละติจูดและลองจิจูด) พร้อมระดับการซูม ยิ่งระดับการซูมสูงก็ยิ่งมองใกล้ขึ้น

import com.google.android.gms.maps.model.CameraPosition
import com.google.android.gms.maps.model.LatLng
import com.google.maps.android.compose.rememberCameraPositionState

val sanFrancisco = LatLng(37.7749, -122.4194)
val cameraPositionState = rememberCameraPositionState {
    position = CameraPosition.fromLatLngZoom(sanFrancisco, 12f)
}

การเชื่อมกล้องเข้ากับแผนที่

ส่ง cameraPositionState นั้นไปยัง GoogleMap เพื่อให้แผนที่เปิดขึ้นโดยจัดกึ่งกลางในตำแหน่งที่ต้องการ เนื่องจากมีการจดจำสถานะไว้ การเลื่อนและการซูมของผู้ใช้จึงยังคงอยู่แม้เกิดการจัดองค์ประกอบใหม่

@Composable
fun CenteredMap() {
    val sf = LatLng(37.7749, -122.4194)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(sf, 12f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    )
}

คุณสมบัติแผนที่

MapProperties ใช้กำหนดสิ่งที่แผนที่แสดง ตัวเลือกที่ใช้บ่อย ได้แก่ ประเภทแผนที่ (แผนที่ปกติ ดาวเทียม ภูมิประเทศ และแบบผสม) รวมถึงการเปิดใช้จุด ตำแหน่งของฉัน สีน้ำเงินหรือไม่

อย่าลืมจดจำออบเจ็กต์คุณสมบัติไว้ เพื่อไม่ให้มีการสร้างใหม่ทุกครั้งที่จัดองค์ประกอบใหม่

import com.google.maps.android.compose.MapProperties
import com.google.maps.android.compose.MapType

val properties = remember {
    MapProperties(
        mapType = MapType.NORMAL,
        isMyLocationEnabled = false
    )
}

การตั้งค่าส่วนติดต่อผู้ใช้ของแผนที่

MapUiSettings ใช้เปิดหรือปิดตัวควบคุมบนหน้าจอ ได้แก่ ปุ่มซูม เข็มทิศ ปุ่มตำแหน่งของฉัน และการใช้ท่าทาง

ปิดตัวควบคุมที่ไม่จำเป็นเพื่อให้หน้าตาดูสะอาดขึ้น เช่น ซ่อนปุ่มซูม แต่ยังคงเปิดใช้การบีบนิ้วเพื่อซูม

import com.google.maps.android.compose.MapUiSettings

val uiSettings = remember {
    MapUiSettings(
        zoomControlsEnabled = false,
        compassEnabled = true,
        scrollGesturesEnabled = true,
        zoomGesturesEnabled = true
    )
}

ประกอบทุกอย่างเข้าด้วยกัน

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

@Composable
fun ConfiguredMap() {
    val sf = LatLng(37.7749, -122.4194)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(sf, 12f)
    }
    val properties = remember { MapProperties(mapType = MapType.NORMAL) }
    val uiSettings = remember { MapUiSettings(zoomControlsEnabled = false) }

    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState,
        properties = properties,
        uiSettings = uiSettings
    )
}

ตอบสนองต่อการแตะแผนที่

GoogleMap มีการเรียกกลับอย่าง onMapClick ให้ใช้สิ่งเหล่านี้เพื่อตอบสนองเมื่อผู้ใช้แตะแผนที่ เช่น บันทึก LatLng ที่เลือกไว้

เก็บจุดที่แตะไว้ในสถานะ เพื่อให้ส่วนติดต่อผู้ใช้ตอบสนองต่อจุดนั้นได้

@Composable
fun ClickableMap() {
    var picked by remember { mutableStateOf<LatLng?>(null) }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        onMapClick = { latLng -> picked = latLng }
    )
    picked?.let { p ->
        Text("Picked: ${p.latitude}, ${p.longitude}")
    }
}

ระบบจัดการวงจรการทำงานให้คุณ

เมื่อใช้ MapView แบบ XML ดั้งเดิม คุณต้องส่งต่อเหตุการณ์วงจรการทำงานทุกเหตุการณ์ด้วยตนเอง แต่ไลบรารี maps-compose จะเชื่อมแผนที่เข้ากับวงจรการทำงานของการจัดองค์ประกอบให้โดย อัตโนมัติ

นั่นหมายความว่าไม่ต้องจัดการ onResume/onPause/onDestroy ด้วยตนเอง อีกเหตุผลหนึ่งที่ควรเลือก API ของ Compose สำหรับหน้าจอใหม่

ตรวจสอบความเข้าใจ

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

สรุปทบทวน

ตอนนี้คุณสามารถวาง Google Map จริงใน Compose ได้แล้ว:

เพิ่ม maps-compose และ play-services-maps พร้อมระบุ คีย์ API ในไฟล์ manifest
แสดงแผนที่ด้วย composable GoogleMap
กำหนดจุดกึ่งกลางและระดับการซูมด้วย rememberCameraPositionState และ CameraPosition
ปรับแต่งด้วย MapProperties และ MapUiSettings และตอบสนองต่อการแตะด้วย onMapClick

บทถัดไป: การอ่านตำแหน่งจริงของอุปกรณ์เพื่อจัดแผนที่ให้อยู่กึ่งกลางที่ผู้ใช้

คำถามที่พบบ่อย

บทเรียน “การแสดงแผนที่” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การแสดงแผนที่” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การแสดงแผนที่”

เพิ่ม Google Maps ลงในแอปของคุณ คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การแสดงแผนที่” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม

ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Android Academy