เพิ่มแผนที่

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

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

  6. ลงทะเบียนการเรียกกลับ

  7. รับ Handle ไปยังออบเจ็กต์ 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

ตัวอย่าง

Kotlin

if (context is FragmentActivity) {
    val mapFragment = SupportMapFragment.newInstance()
    context.supportFragmentManager
        .beginTransaction()
        .add(com.example.snippets.common.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 {
    // ...
}

ตั้งค่า Content View

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

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

รับ Handle ไปยัง Fragment และลงทะเบียนการเรียกกลับ

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

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

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

รับ Handle ไปยังออบเจ็กต์ GoogleMap

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

ในตัวอย่างนี้ การเรียกกลับ onMapReady จะดึงข้อมูล Handle ไปยังออบเจ็กต์ 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"));
}

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

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

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

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

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

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