เพิ่มแผนที่

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

ภาพรวม

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

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

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

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

• MapView — ข้อมูลพร็อพเพอร์ตี้สำหรับจัดการวงจร GoogleMap ออบเจ็กต์

• OnMapReadyCallback — อินเทอร์เฟซ Callback ที่ จัดการเหตุการณ์และการโต้ตอบของผู้ใช้สำหรับออบเจ็กต์ 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"));
      }
  }

ในการเพิ่มแผนที่

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

เช่น

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

      

รับแฮนเดิลสำหรับส่วนย่อยและลงทะเบียน Callback

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

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

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

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ออบเจ็กต์ การเรียกกลับจะถูกเรียกใช้เมื่อแผนที่พร้อมที่จะรับ ข้อมูลจากผู้ใช้ ซึ่งเป็นอินสแตนซ์ที่ไม่ใช่ค่าว่างของคลาส GoogleMap ที่คุณ สามารถใช้เพื่ออัปเดตแผนที่

ในตัวอย่างนี้ Callback 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ดู ทำกิจกรรมให้เสร็จ

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

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