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