หัวข้อนี้จะอธิบายวิธีเพิ่มแผนที่พื้นฐานลงในแอป Android หลังจากที่คุณกำหนดค่าโปรเจ็กต์เพื่อใช้ Maps SDK สำหรับ Android แล้ว หลังจากเพิ่มแผนที่แล้ว คุณสามารถเปลี่ยนประเภทแผนที่และฟีเจอร์ได้
ภาพรวม
Maps SDK สำหรับ Android มีคลาสมากมายที่แอปของคุณสามารถใช้จัดการวงจร ฟังก์ชันการทำงาน และข้อมูลของแผนที่ คลาสนี้รองรับการโต้ตอบของผู้ใช้ตามโมเดล UI ของ Android เช่น การตั้งค่าสถานะเริ่มต้นของแผนที่และการตอบสนองต่อการป้อนข้อมูลด้วยท่าทางสัมผัสจากผู้ใช้ขณะรันไทม์
อินเทอร์เฟซและคลาสหลักสำหรับการจัดการแผนที่:
GoogleMap
— จุดแรกเข้าสำหรับจัดการฟีเจอร์และข้อมูลที่สำคัญของแผนที่ แอปของคุณจะเข้าถึงออบเจ็กต์GoogleMap
ได้หลังจากดึงข้อมูลจากออบเจ็กต์SupportMapFragment
หรือMapView
แล้วเท่านั้นSupportMapFragment
— ส่วนย่อยสำหรับ จัดการวงจรของออบเจ็กต์GoogleMap
OnMapReadyCallback
— อินเทอร์เฟซการเรียกกลับที่จัดการเหตุการณ์และการโต้ตอบของผู้ใช้สำหรับออบเจ็กต์GoogleMap
ออบเจ็กต์ GoogleMap
จะดำเนินการต่อไปนี้โดยอัตโนมัติ
- กำลังเชื่อมต่อกับบริการ Google Maps
- กำลังดาวน์โหลดชิ้นส่วนแผนที่
- กำลังแสดงไทล์บนหน้าจออุปกรณ์
- แสดงการควบคุมต่างๆ เช่น เลื่อนและซูม
- การตอบสนองการเลื่อนและซูมด้วยการเลื่อนแผนที่และซูมเข้าหรือออก
หากต้องการใช้ออบเจ็กต์ GoogleMap
ในแอป คุณต้องใช้ออบเจ็กต์ SupportMapFragment
หรือ MapView
เป็นคอนเทนเนอร์ออบเจ็กต์สำหรับแผนที่ จากนั้นเรียกออบเจ็กต์ GoogleMap
จากคอนเทนเนอร์ เนื่องจากคลาสคอนเทนเนอร์มาจากส่วนหรือมุมมอง 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 เป็นคอนเทนเนอร์แผนที่ แต่คุณสามารถใช้มุมมองแทนได้ ดูตัวอย่างได้ที่ RawMapViewDemoActivity ใน GitHub
ขั้นตอนพื้นฐานมีดังนี้
หากต้องการดาวน์โหลด SDK ให้ขอรับคีย์ API และเพิ่มเฟรมเวิร์กที่จำเป็น โดยทำตามขั้นตอนต่อไปนี้
เพิ่มออบเจ็กต์
SupportMapFragment
ในกิจกรรมที่จะจัดการแผนที่ คุณสามารถเพิ่มส่วนย่อยแบบคงที่หรือแบบไดนามิกได้ใช้อินเทอร์เฟซ
OnMapReadyCallback
ตั้งค่าไฟล์เลย์เอาต์เป็นมุมมองเนื้อหา
หากคุณเพิ่ม Fragment แบบคงที่ ให้จับแฮนเดิลสำหรับ Fragment
ลงทะเบียนโค้ดเรียกกลับ
รับแฮนเดิลสำหรับออบเจ็กต์
GoogleMap
เพิ่มออบเจ็กต์ SupportMapFragment
คุณเพิ่มออบเจ็กต์ SupportMapFragment
ในแอปแบบคงที่หรือแบบไดนามิกได้
วิธีที่ง่ายที่สุดคือการเพิ่มแบบคงที่ ถ้าคุณเพิ่ม Fragment แบบไดนามิก คุณจะดำเนินการเพิ่มเติมกับ Fragment ได้ เช่น นำออกและแทนที่ Fragment ขณะรันไทม์
วิธีเพิ่มส่วนย่อยแบบคงที่
ในไฟล์เลย์เอาต์ของกิจกรรมที่จะจัดการแผนที่ ให้ทำดังนี้
- เพิ่มองค์ประกอบ
fragment
- เพิ่มการประกาศชื่อ
xmlns:map="http://schemas.android.com/apk/res-auto"
การดำเนินการนี้ช่วยให้ใช้แอตทริบิวต์ XML ที่กำหนดเองของmaps
ได้ - ในองค์ประกอบ
fragment
ให้ตั้งค่าแอตทริบิวต์android:name
เป็นcom.google.android.gms.maps.SupportMapFragment
- ในองค์ประกอบ
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"/>
วิธีเพิ่มส่วนย่อยแบบไดนามิก
ในกิจกรรม
- สร้างอินสแตนซ์
SupportMapFragment
- ทำธุรกรรมที่เพิ่ม Fragment ในกิจกรรม ดูข้อมูลเพิ่มเติมได้ใน ธุรกรรม Fragment
เช่น
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); }
รับแฮนเดิลลงในส่วนย่อยและลงทะเบียนโค้ดเรียกกลับ
หากต้องการรับแฮนเดิลไปยัง Fragment ให้เรียกใช้เมธอด
FragmentManager.findFragmentById
แล้วส่งรหัสทรัพยากรของ Fragment ในไฟล์เลย์เอาต์ หากคุณเพิ่ม Fragment แบบไดนามิก ให้ข้ามขั้นตอนนี้ไปเนื่องจากคุณเรียกข้อมูลแฮนเดิลแล้วเรียกใช้เมธอด
getMapAsync
เพื่อตั้งค่าโค้ดเรียกกลับใน 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
ใช้เมธอดโค้ดเรียกกลับ onMapReady
เพื่อรับแฮนเดิลสำหรับออบเจ็กต์GoogleMap
โค้ดเรียกกลับจะทริกเกอร์เมื่อแผนที่พร้อมที่จะรับข้อมูลจากผู้ใช้ ซึ่งจะแสดงอินสแตนซ์ที่ไม่ใช่ค่า Null ของคลาส GoogleMap
ซึ่งใช้อัปเดตแผนที่ได้
ในตัวอย่างนี้ โค้ดเรียกกลับ 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 (ละติจูดที่ 0 องศาและลองจิจูด 0 องศา)
ดูรหัสสำหรับกิจกรรมที่สมบูรณ์:
ขั้นตอนถัดไป
หลังจากทำขั้นตอนเหล่านี้เสร็จแล้ว คุณสามารถกำหนดการตั้งค่าแผนที่