เพิ่มแผนที่

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

ภาพรวม

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

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

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

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

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

   1. ตั้งค่าใน Google Cloud Console

   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

เช่น

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

      

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

      

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

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

class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    // ...
}

      

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

      

ตั้งค่าการดูเนื้อหา

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

ตัวอย่างเช่น หากไฟล์การออกแบบชื่อ main.xml:

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

      

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

      

รับการจัดการกับแฟรกเมนต์และลงทะเบียนการเรียกกลับ

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

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

ตัวอย่างเช่น หากคุณเพิ่มส่วนย่อยแบบคงที่

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

      

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

      

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

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

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

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

      

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

      

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

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

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

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

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