เพิ่มแผนที่

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

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

หมายเหตุ: หากต้องการสร้างแอปที่มีแผนที่พื้นฐานอยู่แล้วอย่างรวดเร็ว คุณสามารถใช้ เทมเพลต Google Maps ใน Android Studio ดูรายละเอียดได้ในการเริ่มต้นใช้งานอย่างรวดเร็ว

ภาพรวม

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

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

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

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

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

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

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

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

หากต้องการใช้ออบเจ็กต์ GoogleMap ในแอป คุณต้องออบเจ็กต์ SupportMapFragment หรือ MapView เป็นตัวออบเจ็กต์คอนเทนเนอร์สําหรับแผนที่ แล้วดึงออบเจ็กต์ GoogleMap ออกจากคอนเทนเนอร์ เนื่องจากคลาสคอนเทนเนอร์มาจาก Fragment หรือ View ของ 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" ซึ่งจะช่วยให้ใช้mapsแอตทริบิวต์ XML ที่กําหนดเองได้
3. ในองค์ประกอบ fragment ให้ตั้งค่าแอตทริบิวต์ android:name เป็น com.google.android.gms.maps.SupportMapFragment
4. ในองค์ประกอบ fragment ให้เพิ่มแอตทริบิวต์ android:id และตั้งค่าเป็น รหัสทรัพยากร (@+id/map) ของ R.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 เพื่อตั้งค่าการเรียกกลับในฟragment

เช่น หากคุณเพิ่มข้อมูลโค้ดแบบคงที่ ให้ทำดังนี้

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

      

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

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

ดู ทำกิจกรรมให้เสร็จ

---

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

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