หัวข้อนี้จะอธิบายวิธีเพิ่มแผนที่พื้นฐานลงในแอป Android หลังจากที่คุณกำหนดค่าโปรเจ็กต์ให้ใช้ Maps SDK สำหรับ Android แล้ว หลังจากเพิ่มแผนที่ คุณสามารถเปลี่ยนประเภทและคุณลักษณะของแผนที่ได้
ภาพรวม
Maps SDK สำหรับ Android มีชั้นเรียนมากมายที่แอปของคุณสามารถใช้จัดการวงจร ฟังก์ชันการทำงาน และข้อมูลของแผนที่ คลาสเหล่านี้รองรับการโต้ตอบของผู้ใช้ตามโมเดล UI ของ Android เช่น การตั้งสถานะเริ่มต้นของแผนที่ และการตอบกลับการป้อนข้อมูลด้วยท่าทางสัมผัสจากผู้ใช้ขณะรันไทม์
อินเทอร์เฟซหลักและคลาสสำหรับการจัดการแผนที่มีดังนี้
GoogleMap
— จุดแรกเข้าสำหรับการจัดการฟีเจอร์และข้อมูลของแผนที่ แอปของคุณจะเข้าถึงออบเจ็กต์GoogleMap
ได้หลังจากที่ดึงข้อมูลจากออบเจ็กต์SupportMapFragment
หรือMapView
แล้วเท่านั้นSupportMapFragment
— ส่วนย่อยสำหรับ การจัดการวงจรของออบเจ็กต์GoogleMap
MapView
— ข้อมูลพร็อพเพอร์ตี้สำหรับจัดการวงจรของออบเจ็กต์GoogleMap
OnMapReadyCallback
— อินเทอร์เฟซ Callback ที่จัดการเหตุการณ์และการโต้ตอบของผู้ใช้สำหรับออบเจ็กต์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
ขั้นตอนพื้นฐานมีดังนี้
หากต้องการรับ SDK ให้รับคีย์ API และเพิ่มเฟรมเวิร์กที่จำเป็น โปรดทำตามขั้นตอนต่อไปนี้
เพิ่มวัตถุ
SupportMapFragment
ในกิจกรรมที่จะจัดการแผนที่ คุณจะเพิ่มส่วนย่อยแบบคงที่หรือแบบไดนามิกได้ใช้อินเทอร์เฟซ
OnMapReadyCallback
ตั้งค่าไฟล์เลย์เอาต์เป็นมุมมองเนื้อหา
หากเพิ่มส่วนย่อยแบบคงที่ ให้รับแฮนเดิลลงในส่วนย่อยนั้น
ลงทะเบียนการติดต่อกลับ
รับแฮนเดิลของออบเจ็กต์
GoogleMap
เพิ่มออบเจ็กต์ SupportMapFragment
คุณเพิ่มออบเจ็กต์ SupportMapFragment
ลงในแอปแบบคงที่หรือแบบไดนามิกได้
วิธีที่ง่ายที่สุดคือการเพิ่มแบบคงที่ หากเพิ่มส่วนย่อยแบบไดนามิก
คุณจะดำเนินการเพิ่มเติมกับส่วนย่อยได้ เช่น นำออกและแทนที่ส่วนนั้นขณะรันไทม์
วิธีเพิ่มส่วนย่อยแบบคงที่
ในไฟล์เลย์เอาต์ของกิจกรรมที่จะจัดการแผนที่ ให้ทำดังนี้
- เพิ่มองค์ประกอบ
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
- คอมมิตธุรกรรมที่เพิ่มส่วนย่อยลงในกิจกรรม ดูข้อมูลเพิ่มเติมได้ที่ธุรกรรมส่วนย่อย
เช่น
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
หากต้องการรับแฮนเดิลลงในแฟรกเมนต์ ให้เรียกเมธอด
FragmentManager.findFragmentById
แล้วส่งต่อรหัสทรัพยากรของแฟรกเมนต์นั้นในไฟล์เลย์เอาต์ หากเพิ่มส่วนย่อยแบบไดนามิก ให้ข้ามขั้นตอนนี้เนื่องจากคุณได้ดึงข้อมูลแฮนเดิลแล้วเรียกเมธอด
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 จะทำงานเมื่อแผนที่พร้อมที่จะรับข้อมูลจากผู้ใช้ ซึ่งเป็นอินสแตนซ์ที่ไม่ใช่ค่าว่างของคลาส GoogleMap
ซึ่งคุณสามารถใช้เพื่ออัปเดตแผนที่
ในตัวอย่างนี้ onMapReady
Callback จะดึงแฮนเดิลไปยังออบเจ็กต์ GoogleMap
จากนั้นจะเพิ่ม marker ลงในแผนที่
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 องศา)
ดูโค้ดของกิจกรรมทั้งหมด:
ขั้นตอนถัดไป
หลังจากทำตามขั้นตอนเหล่านี้แล้ว คุณสามารถกำหนดการตั้งค่าแผนที่ได้