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