หัวข้อนี้จะอธิบายวิธีเพิ่มแผนที่พื้นฐานลงในแอป 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
ขั้นตอนพื้นฐานมีดังนี้
หากต้องการรับ 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
- ทําธุรกรรมที่เพิ่มส่วนย่อยลงในกิจกรรม ดูข้อมูลเพิ่มเติมได้ที่ธุรกรรม Fragment
เช่น
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 ให้เรียกใช้เมธอด
FragmentManager.findFragmentById
แล้วส่งรหัสทรัพยากรของ Fragment ในไฟล์เลย์เอาต์ของคุณ หากคุณเพิ่มส่วนย่อยแบบไดนามิก ให้ข้ามขั้นตอนนี้เนื่องจากคุณดึงข้อมูลแฮนเดิลแล้วเรียกใช้เมธอด
getMapAsync
เพื่อตั้งค่าการเรียกกลับบนส่วนย่อย
ตัวอย่างเช่น ถ้าคุณเพิ่มส่วนย่อยอย่างคงที่:
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
จากนั้นจะมีการเพิ่มเครื่องหมายลงในแผนที่
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") ) }
เมื่อคุณสร้างและเรียกใช้แอปได้สําเร็จ แอปจะแสดงแผนที่ที่มีเครื่องหมายบน Null Island (ละติจูดศูนย์องศาและลองจิจูดศูนย์)
ดูโค้ดของกิจกรรมที่สมบูรณ์:
ขั้นตอนถัดไป
เมื่อทําตามขั้นตอนเหล่านี้แล้ว คุณก็จะกําหนดการตั้งค่าแผนที่ได้