เพิ่มแผนที่

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

ภาพรวม

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

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

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

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

• MapView \- view สำหรับจัดการวงจรการทำงานของออบเจ็กต์ 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. ตั้งค่าไฟล์เลย์เอาต์เป็น Content View

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 ลงในกิจกรรม ดูข้อมูลเพิ่มเติมได้ที่ ดู ธุรกรรม 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 {
    // ...
}

      

ตั้งค่า Content View

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

ตัวอย่างเช่น หากไฟล์เลย์เอาต์ชื่อ 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);
}

      

รับตัวจัดการ Fragment และลงทะเบียนการเรียกกลับ

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

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

ตัวอย่างเช่น หากคุณเพิ่ม 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

ใช้เมธอด Callback 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"));
}

      

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

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

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

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

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