เพิ่มแผนที่

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

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

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

ภาพรวม

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

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

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

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

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

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

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

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

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

ดูรหัส

โค้ดต่อไปนี้มาจากกิจกรรม Java แบบเต็มที่ใช้ในหัวข้อนี้เมื่อเพิ่มส่วนย่อยแบบคงที่ โปรเจ็กต์ 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"));
      }
  }

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

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

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

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

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

   2. ใช้คีย์ API

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

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

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

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

5. หากคุณเพิ่มข้อมูลโค้ดแบบคงที่ ให้รับแฮนเดิลของข้อมูลโค้ด

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

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

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

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

วิธีเพิ่มข้อมูลโค้ดแบบคงที่

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

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 และตั้งค่าเป็น รหัสทรัพยากร (@+id/map) ของ R.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. ทําธุรกรรมที่เพิ่มข้อมูลโค้ดไปยังกิจกรรม ดูข้อมูลเพิ่มเติมได้ที่ธุรกรรมที่แยกส่วน

เช่น

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. หากต้องการรับแฮนเดิลของข้อมูลโค้ด ให้เรียกใช้เมธอด FragmentManager.findFragmentById แล้วส่งรหัสทรัพยากรของข้อมูลโค้ดในไฟล์เลย์เอาต์ หากคุณเพิ่มข้อมูลโค้ดแบบไดนามิก ให้ข้ามขั้นตอนนี้เนื่องจากคุณได้ดึงข้อมูลแฮนเดิลแล้ว

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

เช่น หากคุณเพิ่มข้อมูลโค้ดแบบคงที่ ให้ทำดังนี้

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

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

ในตัวอย่างนี้ ฟังก์ชัน Callback 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 องศา)

ดูโค้ดของกิจกรรมที่สมบูรณ์

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

---

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

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