เพิ่มแผนที่

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

6. ลงทะเบียนการติดต่อกลับ

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

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

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

วิธีเพิ่มส่วนย่อยแบบคงที่

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

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

เช่น

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

      

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

      

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

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

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

      

class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    // ...
}

      

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

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

ตัวอย่างเช่น ถ้าไฟล์ชื่อ "main.xml"

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

      

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

      

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

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

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

ตัวอย่างเช่น ถ้าคุณเพิ่มส่วนย่อยอย่างคงที่:

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

      

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

      

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

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

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

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

      

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

      

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

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

arrow_upwardดูกิจกรรมแบบเต็ม

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

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