เพิ่มแผนที่

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript

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

ภาพรวม

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

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

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

  • SupportMapFragmentส่วนย่อยสําหรับจัดการอายุการใช้งานของออบเจ็กต์ GoogleMap

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

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

เช่น

Java


SupportMapFragment mapFragment = SupportMapFragment.newInstance();
getSupportFragmentManager()
    .beginTransaction()
    .add(R.id.my_container, mapFragment)
    .commit();

      

Kotlin


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

      

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

อัปเดตการประกาศกิจกรรมดังนี้

Java


class MainActivity extends AppCompatActivity implements OnMapReadyCallback {
    // ...
}

      

Kotlin


class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    // ...
}

      

ตั้งค่ามุมมองเนื้อหา

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

เช่น หากไฟล์เลย์เอาต์ชื่อ main.xml

Java


@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}

      

Kotlin


override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)
}

      

จัดการแฮนเดิลไปยัง Fragment และลงทะเบียนโค้ดเรียกกลับ

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

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

เช่น หากคุณเพิ่ม Fragment แบบคงที่

Java


SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

      

Kotlin


val mapFragment = supportFragmentManager
    .findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)

      

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

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

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

Java


@Override
public void onMapReady(GoogleMap googleMap) {
    googleMap.addMarker(new MarkerOptions()
        .position(new LatLng(0, 0))
        .title("Marker"));
}

      

Kotlin


override fun onMapReady(googleMap: GoogleMap) {
    googleMap.addMarker(
        MarkerOptions()
            .position(LatLng(0.0, 0.0))
            .title("Marker")
    )
}

      

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

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

ดูโค้ดของกิจกรรมที่สมบูรณ์:

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


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

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