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