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