เพิ่มแผนที่

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

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

ภาพรวม

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

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

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

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

  • MapView — มุมมองสำหรับจัดการวงจรของออบเจ็กต์ GoogleMap

  • OnMapReadyCallback - อินเทอร์เฟซ Callback ที่จัดการเหตุการณ์และการโต้ตอบของผู้ใช้สำหรับออบเจ็กต์ GoogleMap

ออบเจ็กต์ GoogleMap จะดำเนินการต่อไปนี้โดยอัตโนมัติ

  • กำลังเชื่อมต่อกับบริการ Google Maps
  • กำลังดาวน์โหลดชิ้นส่วนแผนที่
  • แสดงการ์ดบนหน้าจออุปกรณ์
  • แสดงการควบคุมต่างๆ เช่น การเลื่อนและซูม
  • ตอบสนองต่อท่าทางสัมผัสการเลื่อนและซูมด้วยการเลื่อนแผนที่และซูมเข้าหรือออก

หากต้องการใช้ออบเจ็กต์ GoogleMap ในแอป คุณต้องใช้ออบเจ็กต์ SupportMapFragment หรือ MapView เป็นออบเจ็กต์คอนเทนเนอร์สำหรับแผนที่ แล้วดึงข้อมูลออบเจ็กต์ GoogleMap จากคอนเทนเนอร์ เนื่องจากคลาสคอนเทนเนอร์มาจาก Android Fragment หรือ View จึงทำให้แผนที่มีความสามารถในการจัดการวงจรและ 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"));
      }
  }

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

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

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

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

    1. ตั้งค่าในคอนโซล Google Cloud

    2. ใช้คีย์ API

    3. ตั้งค่าโปรเจ็กต์ Android Studio

  2. เพิ่มออบเจ็กต์ SupportMapFragment ลงในกิจกรรมที่จะจัดการแผนที่ คุณสามารถเพิ่ม Fragment แบบคงที่หรือแบบไดนามิกก็ได้

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

  4. ตั้งค่าไฟล์เลย์เอาต์เป็นมุมมองเนื้อหา

  5. หากคุณเพิ่ม Fragment แบบคงที่ ให้รับแฮนเดิลไปยัง Fragment

  6. ลงทะเบียน Callback

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

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

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

เช่น

Kotlin

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

Java

SupportMapFragment mapFragment = SupportMapFragment.newInstance();
FragmentTransaction fragmentTransaction =
        getSupportFragmentManager().beginTransaction();
fragmentTransaction.add(R.id.map_container, mapFragment);
fragmentTransaction.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);
}

รับแฮนเดิลไปยัง Fragment และลงทะเบียน Callback

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

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

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

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

ภาพหน้าจอที่มีแผนที่และเครื่องหมายอยู่ตรงกลางของ Null Island

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

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

ดูกิจกรรมทั้งหมด

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

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