หน้าต่างข้อมูลจะแสดงข้อความหรือรูปภาพในหน้าต่างป๊อปอัปเหนือแผนที่ หน้าต่างข้อมูลจะตรึงอยู่ที่เครื่องหมายเสมอ ลักษณะการทํางานเริ่มต้นของผู้ใช้คือจะแสดงเมื่อแตะเครื่องหมาย
ตัวอย่างโค้ด
ที่เก็บ ApiDemos ใน GitHub มีตัวอย่างที่แสดงฟีเจอร์ทั้งหมดของหน้าต่างข้อมูล
- MarkerDemoActivity - Java: การปรับแต่งหน้าต่างข้อมูลและการใช้ Listener หน้าต่างข้อมูล
- MarkerDemoActivity - Kotlin: การปรับแต่งหน้าต่างข้อมูลและการใช้ Listener หน้าต่างข้อมูล
ข้อมูลเบื้องต้น
หน้าต่างข้อมูลช่วยให้คุณแสดงข้อมูลแก่ผู้ใช้เมื่อผู้ใช้แตะที่เครื่องหมาย ระบบจะแสดงหน้าต่างข้อมูลเพียงครั้งละ 1 หน้าต่างเท่านั้น หากผู้ใช้คลิกที่เครื่องหมาย หน้าต่างข้อมูลปัจจุบันจะปิดลงและหน้าต่างข้อมูลใหม่จะปรากฏขึ้น โปรดทราบว่าหากผู้ใช้คลิกเครื่องหมายที่แสดงหน้าต่างข้อมูลอยู่ หน้าต่างข้อมูลจะปิดและเปิดขึ้นมาใหม่
หน้าต่างข้อมูลจะวาดโดยสัมพันธ์กับหน้าจอของอุปกรณ์ โดยมีศูนย์กลางอยู่เหนือเครื่องหมายที่เกี่ยวข้อง หน้าต่างข้อมูลเริ่มต้นจะแสดงชื่อเป็นตัวหนา พร้อมข้อความตัวอย่าง (ไม่บังคับ) ใต้ชื่อ
เพิ่มหน้าต่างข้อมูล
วิธีที่ง่ายที่สุดในการเพิ่มหน้าต่างข้อมูลคือการตั้งค่าเมธอดของ title()
และ snippet()
ของเครื่องหมายที่เกี่ยวข้อง การตั้งค่าพร็อพเพอร์ตี้เหล่านี้จะทําให้หน้าต่างข้อมูลปรากฏขึ้นเมื่อมีการคลิกเครื่องหมาย
Java
final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298); Marker melbourne = map.addMarker( new MarkerOptions() .position(melbourneLatLng) .title("Melbourne") .snippet("Population: 4,137,400"));
Kotlin
val melbourneLatLng = LatLng(-37.81319, 144.96298) val melbourne = map.addMarker( MarkerOptions() .position(melbourneLatLng) .title("Melbourne") .snippet("Population: 4,137,400") )
แสดง/ซ่อนหน้าต่างข้อมูล
หน้าต่างข้อมูลได้รับการออกแบบมาให้ตอบสนองต่อเหตุการณ์การสัมผัสของผู้ใช้ คุณแสดงหน้าต่างข้อมูลแบบเป็นโปรแกรมได้โดยเรียกใช้
showInfoWindow()
บนเครื่องหมายเป้าหมาย คุณซ่อนหน้าต่างข้อมูลได้ด้วยการโทร
hideInfoWindow()
Java
final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298); Marker melbourne = map.addMarker( new MarkerOptions() .position(melbourneLatLng) .title("Melbourne")); melbourne.showInfoWindow();
Kotlin
val melbourneLatLng = LatLng(-37.81319, 144.96298) val melbourne = map.addMarker( MarkerOptions() .position(melbourneLatLng) .title("Melbourne") ) melbourne?.showInfoWindow()
นอกจากนี้ คุณยังสร้างหน้าต่างข้อมูลสําหรับเครื่องหมายที่คลัสเตอร์แต่ละรายการได้ด้วย อ่านคําแนะนําในการเพิ่มหน้าต่างข้อมูลสําหรับเครื่องหมายคลัสเตอร์แต่ละรายการ
หน้าต่างข้อมูลที่กําหนดเอง
นอกจากนี้คุณยังสามารถปรับแต่งเนื้อหาและการออกแบบของหน้าต่างข้อมูล หากต้องการทําเช่นนั้น คุณต้องสร้างการติดตั้งใช้งานอินเทอร์เฟซ InfoWindowAdapter
ที่เป็นรูปธรรม แล้วเรียกใช้ GoogleMap.setInfoWindowAdapter()
ด้วยการติดตั้งใช้งาน อินเทอร์เฟซมี 2 วิธีที่คุณสามารถใช้ได้ ได้แก่ getInfoWindow(Marker)
และ getInfoContents(Marker)
API จะเรียกใช้ getInfoWindow(Marker)
ก่อน และหากมีการส่งคืน null
ก็จะเรียก getInfoContents(Marker)
หากเป็นเช่นนี้ด้วย
null
ระบบจะใช้หน้าต่างข้อมูลเริ่มต้น
แท็บแรก (getInfoWindow()
) ทําให้คุณสร้างมุมมองที่จะใช้สําหรับหน้าต่างข้อมูลทั้งหมดได้ ไอคอนที่ 2
(getInfoContents()
) ช่วยให้คุณปรับแต่งเนื้อหาของหน้าต่างเองได้ แต่ยังคงเก็บกรอบหน้าต่างและพื้นหลังข้อมูลเริ่มต้นไว้
รูปภาพด้านล่างแสดงหน้าต่างข้อมูลเริ่มต้น หน้าต่างข้อมูลที่มีเนื้อหาที่ปรับแต่ง และหน้าต่างข้อมูลที่มีกรอบและพื้นหลังที่ปรับแต่ง

เหตุการณ์เกี่ยวกับหน้าต่างข้อมูล
ตัวอย่างกิจกรรม MarkerDemoActivity มีโค้ดตัวอย่างสําหรับการลงทะเบียนและจัดการเหตุการณ์ของหน้าต่างข้อมูล
คุณใช้OnInfoWindowClickListener
เพื่อฟังการคลิกเหตุการณ์ในหน้าต่างข้อมูลได้ ในการตั้งค่า Listener นี้บนแผนที่ ให้เรียก GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener)
เมื่อผู้ใช้คลิกหน้าต่างข้อมูล ระบบจะเรียก onInfoWindowClick(Marker)
และหน้าต่างข้อมูลจะไฮไลต์เป็นสีไฮไลต์เริ่มต้น (สีเทา)
Java
class InfoWindowActivity extends AppCompatActivity implements GoogleMap.OnInfoWindowClickListener, OnMapReadyCallback { @Override public void onMapReady(GoogleMap googleMap) { // Add markers to the map and do other map setup. // ... // Set a listener for info window events. googleMap.setOnInfoWindowClickListener(this); } @Override public void onInfoWindowClick(Marker marker) { Toast.makeText(this, "Info window clicked", Toast.LENGTH_SHORT).show(); } }
Kotlin
internal inner class InfoWindowActivity : AppCompatActivity(), OnInfoWindowClickListener, OnMapReadyCallback { override fun onMapReady(googleMap: GoogleMap) { // Add markers to the map and do other map setup. // ... // Set a listener for info window events. googleMap.setOnInfoWindowClickListener(this) } override fun onInfoWindowClick(marker: Marker) { Toast.makeText( this, "Info window clicked", Toast.LENGTH_SHORT ).show() } }
ในทํานองเดียวกัน คุณก็ฟังเหตุการณ์การคลิกแบบยาวได้ด้วย OnInfoWindowLongClickListener
ซึ่งตั้งค่าได้ด้วยการโทร
GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener)
Listener นี้มีลักษณะการทํางานคล้ายกับ Listener การคลิก และจะได้รับการแจ้งเตือนเกี่ยวกับเหตุการณ์การคลิกแบบยาวด้วยการติดต่อกลับของ onInfoWindowClose(Marker)
หากต้องการรับการแจ้งเตือนเมื่อหน้าต่างข้อมูลปิด ให้ใช้ OnInfoWindowCloseListener
ซึ่งกําหนดค่าได้โดยการโทร
GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener)
คุณจะได้รับสายติดต่อกลับ onInfoWindowClose(Marker)
หมายเหตุเกี่ยวกับการรีเฟรชหน้าต่างข้อมูล: เหตุการณ์ onInfoWindowClose()
จะเริ่มทํางานหากผู้ใช้รีเฟรชหน้าต่างข้อมูลโดยแตะที่เครื่องหมายที่มีหน้าต่างข้อมูลเปิดอยู่ แต่หากคุณเรียกใช้ Marker.showInfoWindow()
แบบเป็นโปรแกรมในหน้าต่างข้อมูลแบบเปิด เหตุการณ์ onInfoWindowClose()
จะไม่เริ่มทํางาน ลักษณะการทํางานหลังนี้พิจารณาจากสมมติฐานที่คุณทราบว่าหน้าต่างข้อมูลจะปิดและเปิดอีกครั้ง
ดังที่อธิบายไว้ในส่วนก่อนหน้าในหน้าต่างข้อมูล หน้าต่างข้อมูลไม่ใช่มุมมองแบบเรียลไทม์ แต่มุมมองจะแสดงเป็นรูปภาพบนแผนที่แทน ด้วยเหตุนี้ ระบบจะไม่สนใจผู้ฟังที่คุณตั้งค่าไว้ในข้อมูลพร็อพเพอร์ตี้ และคุณไม่สามารถแยกความแตกต่างระหว่างกิจกรรมการคลิกบนส่วนต่างๆ ของมุมมองได้ เราไม่แนะนําให้วางคอมโพเนนต์แบบอินเทอร์แอกทีฟ เช่น ปุ่ม ช่องทําเครื่องหมาย หรืออินพุตข้อความ ภายในหน้าต่างข้อมูลที่กําหนดเอง