เพิ่มแผนที่

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

หัวข้อนี้จะอธิบายวิธีเพิ่มแผนที่พื้นฐานลงในแอป 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"));
      }
  }

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

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

เช่น

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

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

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

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

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

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

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

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

ภาพหน้าจอแสดงแผนที่และเครื่องหมายซึ่งมีศูนย์กลางอยู่บนเกาะนัล

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

ดูโค้ดของกิจกรรมทั้งหมด:

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

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

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