เพิ่มแผนที่ 3 มิติลงในแอป

เลือกแพลตฟอร์ม Android iOS JavaScript

แผนที่ 3 มิติแสดงนิวยอร์กซิตี

หน้านี้จะอธิบายตัวอย่างวิธีเพิ่มแผนที่ 3 มิติพื้นฐานลงในแอป Android โดยใช้ Maps 3D SDK สำหรับ Android วิธีการในหน้านี้ถือว่าคุณได้ทําตามขั้นตอนในหน้าการตั้งค่าเรียบร้อยแล้ว และมีสิ่งต่อไปนี้

  • โปรเจ็กต์ Google Cloud ที่เปิดใช้ Maps 3D SDK สำหรับ Android
  • คีย์ API ที่กําหนดค่าให้ใช้กับ Maps 3D SDK สําหรับ Android
  • โปรเจ็กต์ Android Studio ที่สร้างขึ้นเพื่อใช้กับ Maps 3D SDK สําหรับ Android

ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อกําหนดเบื้องต้นเหล่านี้ได้ที่การตั้งค่า

ส่วนที่ 1: อัปเดตไฟล์เลย์เอาต์ (activity_main.xml) เพื่อเพิ่มคอมโพเนนต์ Map3DView

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

  1. เปิดไฟล์เลย์เอาต์ของกิจกรรมหลัก ซึ่งปกติจะอยู่ที่ app/src/main/res/layout/activity_main.xml

  2. ใน ConstraintLayout รูท (หรือองค์ประกอบเลย์เอาต์รูท) ให้เพิ่มเนมสเปซ map3d XML ดังนี้

    xmlns:map3d="http://schemas.android.com/apk/res-auto"

  3. ลบ <TextView> เริ่มต้นที่แสดง "Hello World"

  4. เพิ่มคอมโพเนนต์ Map3DView ลงในเลย์เอาต์ คุณปรับแต่งตำแหน่งกล้องและแอตทริบิวต์อื่นๆ ได้ ดังนี้

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:map3d="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <com.google.android.gms.maps3d.Map3DView
    android:id="@+id/map3dView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    map3d:mode="hybrid"
    map3d:centerLat="38.544012"
    map3d:centerLng="-107.670428"
    map3d:centerAlt="2427.6"
    map3d:heading="310"
    map3d:tilt="63"
    map3d:range="8266"
    map3d:roll="0"
    map3d:minAltitude="0"
    map3d:maxAltitude="1000000"
    map3d:minHeading="0"
    map3d:maxHeading="360"
    map3d:minTilt="0"
    map3d:maxTilt="90"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

ส่วนที่ 2: อัปเดต MainActivity.kt

ขั้นตอนต่อไปนี้จะเริ่มต้นคอมโพเนนต์ Map3DView ที่เพิ่มลงในไฟล์ activity_main.xml ในส่วนที่ 1 และจัดการเหตุการณ์วงจรชีวิตของคอมโพเนนต์

  1. เปิดไฟล์ MainActivity.kt ซึ่งปกติจะอยู่ที่ app/src/main/java/com/example/yourpackagename/MainActivity.kt

  2. เพิ่มการนําเข้าที่จําเป็นสําหรับ Maps 3D SDK สําหรับ Android

    import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback

  3. แก้ไขคลาส MainActivity เพื่อใช้ OnMap3DViewReadyCallback โดยทำดังนี้

    class MainActivity : AppCompatActivity(), OnMap3DViewReadyCallback {

  4. ประกาศตัวแปรสําหรับ Map3DView และ GoogleMap3D

    private lateinit var map3DView: Map3DView
private var googleMap3D: GoogleMap3D? = null

  5. ในเมธอด onCreate หลัง setContentView(...) และบล็อก ViewCompat.setOnApplyWindowInsetsListener ให้เริ่มต้น map3DView, เรียกเมธอดวงจรชีวิตของ onCreate และขอแผนที่แบบไม่พร้อมกัน

    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    setContentView(R.layout.activity_main)
    ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
        val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
        insets
    }

    map3DView = findViewById(R.id.map3dView)
    map3DView.onCreate(savedInstanceState)
    map3DView.getMap3DViewAsync(this)
}

  6. ลบล้างเมธอด onMap3DViewReady การเรียกกลับนี้จะทริกเกอร์เมื่อแผนที่พร้อมใช้งาน

    override fun onMap3DViewReady(googleMap3D: GoogleMap3D) {
    // Interact with the googleMap3D object here
    this.googleMap3D = googleMap3D
    // You can now make calls to the googleMap3D object, e.g.,
    // googleMap3D.cameraController.flyTo(camera { ... })
}

  7. ส่งต่อเหตุการณ์ในวงจรจากกิจกรรมไปยัง Map3DView โดยเพิ่มการลบล้างต่อไปนี้ลงใน MainActivity

    override fun onStart() {
    super.onStart()
    map3DView.onStart()
}

override fun onResume() {
    super.onResume()
    map3DView.onResume()
}

override fun onPause() {
    map3DView.onPause()
    super.onPause()
}

override fun onStop() {
    map3DView.onStop()
    super.onStop()
}

override fun onDestroy() {
    map3DView.onDestroy()
    super.onDestroy()
}

override fun onSaveInstanceState(outState: Bundle) {
    super.onSaveInstanceState(outState)
    map3DView.onSaveInstanceState(outState)
}

override fun onLowMemory() {
    super.onLowMemory()
    map3DView.onLowMemory()
}

ส่วนที่ 3: ซิงค์ Gradle และเรียกใช้

เมื่ออัปเดตเลย์เอาต์และกิจกรรมของแอปแล้ว คุณสามารถสร้างและเรียกใช้แอปเพื่อดูมุมมองแผนที่ 3 มิติได้

  1. หากต้องการซิงค์โปรเจ็กต์กับ Gradle ให้เลือกไฟล์ > ซิงค์โปรเจ็กต์กับไฟล์ Gradle

  2. หากต้องการสร้างและเรียกใช้แอปบนโปรแกรมจำลองหรืออุปกรณ์จริง ให้เลือกเรียกใช้ > เรียกใช้

หากกําหนดค่าทุกอย่างอย่างถูกต้อง คุณควรเห็นแผนที่ 3 มิติแสดงในแอป โดยกึ่งกลางอยู่ใกล้กับพิกัดที่ระบุใน activity_main.xml

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

เมื่อเพิ่มแผนที่ 3 มิติพื้นฐานลงในแอปแล้ว คุณจะสำรวจฟีเจอร์ขั้นสูงอื่นๆ ของ Maps 3D SDK สําหรับ Android ได้ เช่น ภาพเคลื่อนไหวเส้นทางของกล้อง เครื่องหมาย 3 มิติ หรือรูปหลายเหลี่ยม