หน้าต่างข้อมูลจะแสดงข้อความหรือรูปภาพในหน้าต่างป๊อปอัปเหนือแผนที่ หน้าต่างข้อมูลจะตรึงอยู่กับเครื่องหมายเสมอ ลักษณะการทำงานเริ่มต้นคือ จะแสดงเมื่อมีการแตะเครื่องหมาย
ตัวอย่างโค้ด
ที่เก็บ ApiDemos ใน GitHub มีตัวอย่างที่แสดงให้เห็นถึงฟีเจอร์หน้าต่างข้อมูลทั้งหมดดังต่อไปนี้
- markerDemoActivity - Java: การปรับแต่งหน้าต่างข้อมูลและการใช้ Listener หน้าต่างข้อมูล
- markerDemoActivity - Kotlin: การปรับแต่งหน้าต่างข้อมูลและการใช้ Listener หน้าต่างข้อมูล
เกริ่นนำ
หน้าต่างข้อมูลทำให้คุณสามารถแสดงข้อมูลให้กับผู้ใช้เมื่อผู้ใช้แตะเครื่องหมาย แสดงหน้าต่างข้อมูลทีละหน้าต่างเท่านั้น หากผู้ใช้คลิกที่เครื่องหมาย หน้าต่างข้อมูลปัจจุบันจะปิดลงและหน้าต่างข้อมูลใหม่จะปรากฏขึ้น โปรดทราบว่าหากผู้ใช้คลิกเครื่องหมายที่แสดงหน้าต่างข้อมูลอยู่ หน้าต่างข้อมูลนั้นจะปิดและเปิดขึ้นมาใหม่
หน้าต่างข้อมูลจะวาดโดยมีทิศทางตามหน้าจอของอุปกรณ์ โดยให้อยู่ตรงกลางเหนือเครื่องหมายที่เกี่ยวข้อง หน้าต่างข้อมูลเริ่มต้นจะมีชื่อเป็นตัวหนา โดยมีข้อความตัวอย่าง (ไม่บังคับ) อยู่ใต้ชื่อ
เพิ่มหน้าต่างข้อมูล
วิธีที่ง่ายที่สุดในการเพิ่มหน้าต่างข้อมูลคือการตั้งค่าเมธอด 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
ถูกส่งคืน ระบบจะเรียกใช้ 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 ที่คุณตั้งค่าไว้ในการแสดงผล และคุณไม่สามารถแยกแยะระหว่างกิจกรรมการคลิกในส่วนต่างๆ ของมุมมองได้ ขอแนะนำว่าอย่าวางคอมโพเนนต์แบบอินเทอร์แอกทีฟ เช่น ปุ่ม ช่องทำเครื่องหมาย หรือการป้อนข้อความ ไว้ภายในหน้าต่างข้อมูลที่กำหนดเอง