เพิ่มแผนที่

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

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

หมายเหตุ: หากต้องการสร้างแอปที่มีแผนที่พื้นฐานอยู่แล้วอย่างรวดเร็ว คุณสามารถใช้ เทมเพลต Google Maps ใน Android Studio ได้ ดูรายละเอียดได้ในการเริ่มต้นอย่างรวดเร็ว

ภาพรวม

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

อินเทอร์เฟซและคลาสหลักสำหรับการจัดการแผนที่มีดังนี้

• GoogleMap - จุดแรกเข้าสำหรับการจัดการฟีเจอร์และข้อมูลแผนที่พื้นฐาน แอปจะเข้าถึงออบเจ็กต์ GoogleMap ได้หลังจากที่ดึงข้อมูลจากออบเจ็กต์ SupportMapFragment หรือ MapView แล้วเท่านั้น

• SupportMapFragment — Fragment สำหรับ การจัดการวงจรของออบเจ็กต์ GoogleMap

• MapView — มุมมองสำหรับการจัดการวงจรของออบเจ็กต์ GoogleMap

• OnMapReadyCallback — อินเทอร์เฟซการเรียกกลับที่ จัดการเหตุการณ์และการโต้ตอบของผู้ใช้สําหรับออบเจ็กต์ GoogleMap

ออบเจ็กต์ GoogleMap จะดำเนินการต่อไปนี้โดยอัตโนมัติ

• กำลังเชื่อมต่อกับบริการ Google Maps
• กำลังดาวน์โหลดการ์ดแผนที่
• การแสดงการ์ดบนหน้าจออุปกรณ์
• แสดงตัวควบคุมต่างๆ เช่น การเลื่อนและซูม
• ตอบสนองต่อท่าทางสัมผัสการแพนและซูมด้วยการเลื่อนแผนที่และซูมเข้าหรือออก

หากต้องการใช้ออบเจ็กต์ GoogleMap ในแอป คุณต้องใช้ออบเจ็กต์ SupportMapFragment หรือ MapView เป็นออบเจ็กต์คอนเทนเนอร์สำหรับแผนที่ และ จากนั้นดึงข้อมูลออบเจ็กต์ GoogleMap จากคอนเทนเนอร์ เนื่องจากคลาสคอนเทนเนอร์ ได้มาจาก Fragment หรือ View ของ Android จึงมีฟังก์ชันการจัดการวงจรและ UI ของคลาสฐาน Android ให้กับแผนที่ คลาส SupportMapFragment เป็นคอนเทนเนอร์ที่ทันสมัยและใช้กันโดยทั่วไปสำหรับออบเจ็กต์ GoogleMap

ดูโค้ด

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

แสดง / ซ่อนโค้ด

  package com.example.mapsetup;

  import androidx.appcompat.app.AppCompatActivity;

  import android.os.Bundle;

  import com.google.android.gms.maps.GoogleMap;
  import com.google.android.gms.maps.OnMapReadyCallback;
  import com.google.android.gms.maps.SupportMapFragment;
  import com.google.android.gms.maps.model.LatLng;
  import com.google.android.gms.maps.model.MarkerOptions;

  // Implement OnMapReadyCallback.
  public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {

      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          // Set the layout file as the content view.
          setContentView(R.layout.activity_main);

          // Get a handle to the fragment and register the callback.
          SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                  .findFragmentById(R.id.map);
          mapFragment.getMapAsync(this);

      }

      // Get a handle to the GoogleMap object and display marker.
      @Override
      public void onMapReady(GoogleMap googleMap) {
          googleMap.addMarker(new MarkerOptions()
                  .position(new LatLng(0, 0))
                  .title("Marker"));
      }
  }

วิธีเพิ่มแผนที่

ส่วนนี้จะอธิบายวิธีเพิ่มแผนที่พื้นฐานโดยใช้ Fragment เป็นคอนเทนเนอร์แผนที่ แต่คุณจะใช้ View แทนก็ได้ ดูตัวอย่างได้ที่ RawMapViewDemoActivity ใน Github

ขั้นตอนพื้นฐาน

1. หากต้องการรับ SDK, รับคีย์ API และเพิ่มเฟรมเวิร์กที่จำเป็น ให้ทำตามขั้นตอนใน

   1. ตั้งค่าในคอนโซล Google Cloud

   2. ใช้คีย์ API

   3. ตั้งค่าโปรเจ็กต์ Android Studio

2. เพิ่มออบเจ็กต์ SupportMapFragment ลงในกิจกรรมที่จะจัดการแผนที่ คุณเพิ่ม Fragment แบบคงที่หรือแบบไดนามิกได้

3. ใช้OnMapReadyCallbackอินเทอร์เฟซ

4. ตั้งค่าไฟล์เลย์เอาต์เป็นมุมมองเนื้อหา

5. หากเพิ่ม Fragment แบบคงที่ ให้รับแฮนเดิลไปยัง Fragment

6. ลงทะเบียนการเรียกกลับ

7. รับแฮนเดิลไปยังออบเจ็กต์ GoogleMap

เพิ่มออบเจ็กต์ SupportMapFragment

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

วิธีเพิ่ม Fragment แบบคงที่

ในไฟล์เลย์เอาต์ของกิจกรรมที่จะจัดการแผนที่ ให้ทำดังนี้

1. เพิ่มองค์ประกอบ fragment
2. เพิ่มการประกาศชื่อ xmlns:map="http://schemas.android.com/apk/res-auto" ซึ่งจะช่วยให้ใช้maps แอตทริบิวต์ XML ที่กำหนดเองได้
3. ในองค์ประกอบ fragment ให้ตั้งค่าแอตทริบิวต์ android:name เป็น com.google.android.gms.maps.SupportMapFragment
4. ในองค์ประกอบ fragment ให้เพิ่มแอตทริบิวต์ android:id และตั้งค่าเป็น รหัสทรัพยากร R.id.map (@+id/map)

ตัวอย่างเช่น ต่อไปนี้คือไฟล์เลย์เอาต์ที่สมบูรณ์ซึ่งมีองค์ประกอบ fragment

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

วิธีเพิ่ม Fragment แบบไดนามิก

ในกิจกรรม ให้ทำดังนี้

1. สร้างอินสแตนซ์ SupportMapFragment
2. คอมมิตธุรกรรมที่เพิ่ม Fragment ลงในกิจกรรม ดูข้อมูลเพิ่มเติมได้ที่ ธุรกรรมแบบแยกส่วน

เช่น

Kotlin

val mapFragment = SupportMapFragment.newInstance()
supportFragmentManager
    .beginTransaction()
    .add(R.id.my_container, mapFragment)
    .commit()

      

Java

SupportMapFragment mapFragment = SupportMapFragment.newInstance();
getSupportFragmentManager()
    .beginTransaction()
    .add(R.id.my_container, mapFragment)
    .commit();

      

ใช้OnMapReadyCallbackอินเทอร์เฟซ

อัปเดตการประกาศกิจกรรมดังนี้

Kotlin

class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    // ...
}

      

Java

class MainActivity extends AppCompatActivity implements OnMapReadyCallback {
    // ...
}

      

ตั้งค่ามุมมองเนื้อหา

ในเมธอด onCreate ของกิจกรรม ให้เรียกใช้เมธอด setContentView และตั้งค่าไฟล์เลย์เอาต์เป็นมุมมองเนื้อหา

เช่น หากไฟล์เลย์เอาต์ชื่อ main.xml

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)
}

      

Java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}

      

รับแฮนเดิลไปยัง Fragment และลงทะเบียนการเรียกกลับ

1. หากต้องการรับแฮนเดิลไปยัง Fragment ให้เรียกใช้เมธอด FragmentManager.findFragmentById แล้วส่งรหัสทรัพยากรของ Fragment ในไฟล์เลย์เอาต์ หากคุณเพิ่ม Fragment แบบไดนามิก ให้ข้ามขั้นตอนนี้เนื่องจากคุณได้เรียกข้อมูลแฮนเดิลแล้ว

2. เรียกใช้เมธอด getMapAsync เพื่อตั้งค่าการเรียกกลับใน Fragment

เช่น หากคุณเพิ่ม Fragment แบบคงที่ ให้ทำดังนี้

Kotlin

val mapFragment = supportFragmentManager
    .findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)

      

Java

SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

      

รับแฮนเดิลไปยังออบเจ็กต์ GoogleMap

ใช้เมธอดเรียกกลับ onMapReady เพื่อรับแฮนเดิลไปยัง GoogleMapออบเจ็กต์ การเรียกกลับจะทริกเกอร์เมื่อแผนที่พร้อมรับ อินพุตของผู้ใช้ โดยจะแสดงอินสแตนซ์ที่ไม่ใช่ Null ของคลาส GoogleMap ซึ่งคุณ ใช้เพื่ออัปเดตแผนที่ได้

ในตัวอย่างนี้ onMapReady Callback จะเรียกแฮนเดิลไปยังออบเจ็กต์ GoogleMap จากนั้นจะเพิ่ม Marker ลงในแผนที่

Kotlin

override fun onMapReady(googleMap: GoogleMap) {
    googleMap.addMarker(
        MarkerOptions()
            .position(LatLng(0.0, 0.0))
            .title("Marker")
    )
}

      

Java

@Override
public void onMapReady(GoogleMap googleMap) {
    googleMap.addMarker(new MarkerOptions()
        .position(new LatLng(0, 0))
        .title("Marker"));
}

      

เมื่อสร้างและเรียกใช้แอปเรียบร้อยแล้ว แอปจะแสดงแผนที่ พร้อมเครื่องหมายบนเกาะนัลล์ (ละติจูด 0 องศาและลองจิจูด 0 องศา)

ดูโค้ดของกิจกรรมทั้งหมด

ดู กิจกรรมที่เสร็จสมบูรณ์

---

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

หลังจากทำตามขั้นตอนเหล่านี้เสร็จแล้ว คุณจะกำหนดการตั้งค่าแผนที่ได้