เพิ่มแผนที่

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

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

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

ภาพรวม

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

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

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

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

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

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

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

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

หากต้องการใช้ออบเจ็กต์ GoogleMap ในแอป คุณต้องใช้ออบเจ็กต์ SupportMapFragment หรือ MapView เป็นคอนเทนเนอร์ออบเจ็กต์สำหรับแผนที่ จากนั้นเรียกออบเจ็กต์ GoogleMap จากคอนเทนเนอร์ เนื่องจากคลาสคอนเทนเนอร์มาจากส่วนหรือมุมมอง 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 เป็นคอนเทนเนอร์แผนที่ แต่คุณสามารถใช้มุมมองแทนได้ ดูตัวอย่างได้ที่ RawMapViewDemoActivity ใน GitHub

ขั้นตอนพื้นฐานมีดังนี้

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

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

   2. ใช้คีย์ API

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

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

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" การดำเนินการนี้ช่วยให้ใช้แอตทริบิวต์ XML ที่กำหนดเองของ maps ได้
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"/>

วิธีเพิ่มส่วนย่อยแบบไดนามิก

ในกิจกรรม

1. สร้างอินสแตนซ์ SupportMapFragment
2. ทำธุรกรรมที่เพิ่ม Fragment ในกิจกรรม ดูข้อมูลเพิ่มเติมได้ใน ธุรกรรม 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);
}

      

รับแฮนเดิลลงในส่วนย่อยและลงทะเบียนโค้ดเรียกกลับ

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

2. เรียกใช้เมธอด getMapAsync เพื่อตั้งค่าโค้ดเรียกกลับใน 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 จะดึงแฮนเดิลไปยังออบเจ็กต์ GoogleMap จากนั้นจึงเพิ่มเครื่องหมายลงในแผนที่

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"));
}

      

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

ดูรหัสสำหรับกิจกรรมที่สมบูรณ์:

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

---

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

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