หน้าต่างข้อมูลจะแสดงข้อความหรือรูปภาพในหน้าต่างป๊อปอัปเหนือแผนที่ ข้อมูล จะตรึงหน้าต่างไว้กับเครื่องหมายเสมอ ลักษณะการทำงานเริ่มต้นคือ เพื่อแสดงเมื่อมีการแตะเครื่องหมาย
ตัวอย่างโค้ด
ที่เก็บ 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
คือ
ส่งคืนแล้ว และจะโทรหา getInfoContents(Marker)
หากสิ่งนี้ส่งคืน
null
หน้าต่างข้อมูลเริ่มต้นจะถูกใช้
รายการแรก (getInfoWindow()
) ช่วยให้คุณแสดงมุมมองที่
จะใช้สำหรับหน้าต่างข้อมูลทั้งหมด รายการที่ 2
(getInfoContents()
) ช่วยให้คุณปรับแต่งเนื้อหาของหน้าต่างได้
แต่ยังคงใช้กรอบและพื้นหลังหน้าต่างข้อมูลเริ่มต้นไว้
ภาพด้านล่างแสดงหน้าต่างข้อมูลเริ่มต้น ซึ่งเป็นหน้าต่างข้อมูลที่มี เนื้อหา รวมถึงหน้าต่างข้อมูลที่มีเฟรมและพื้นหลังที่กำหนดเอง
![การเปรียบเทียบหน้าต่างข้อมูล การเปรียบเทียบหน้าต่างข้อมูล](https://developers.google.cn/static/maps/documentation/images/marker-infowindows.png?authuser=6&hl=th)
เหตุการณ์เกี่ยวกับหน้าต่างข้อมูล
ตัวอย่าง 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 การคลิก และจะได้รับการแจ้งเตือนใน
เหตุการณ์การคลิกแบบยาวที่มี Callback onInfoWindowClose(Marker)
หากต้องการรับการแจ้งเตือนเมื่อหน้าต่างข้อมูลปิดลง ให้ใช้
OnInfoWindowCloseListener
ซึ่งคุณสามารถ
ตั้งค่าโดยการโทร
GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener)
คุณจะ
ได้รับการติดต่อกลับจาก onInfoWindowClose(Marker)
หมายเหตุเกี่ยวกับการรีเฟรชหน้าต่างข้อมูล: เหตุการณ์ onInfoWindowClose()
จะเริ่มทำงานหาก
ผู้ใช้รีเฟรชหน้าต่างข้อมูลโดยแตะเครื่องหมายที่มีช่องเปิดอยู่แล้ว
หน้าต่างข้อมูล แต่ถ้าคุณเรียก Marker.showInfoWindow()
แบบเป็นโปรแกรมใน
เปิดหน้าต่างข้อมูล เหตุการณ์ onInfoWindowClose()
ไม่เริ่มทำงาน รายการหลัง
จะอ้างอิงจากสมมติฐานที่คุณทราบว่าหน้าต่างข้อมูลจะ
ปิดแล้วเปิดใหม่
ดังที่กล่าวไว้ในส่วนก่อนหน้าเกี่ยวกับหน้าต่างข้อมูล หน้าต่างข้อมูลไม่ใช่ Live View แต่มุมมองจะแสดงผลเป็นรูปภาพบนแผนที่ เพื่อ ดังนั้นระบบจะไม่สนใจ Listener ที่คุณตั้งค่าไว้ในมุมมอง แยกความแตกต่างระหว่างกิจกรรมการคลิกในส่วนต่างๆ ของมุมมอง คุณได้รับคำแนะนำ อย่าวางคอมโพเนนต์แบบอินเทอร์แอกทีฟ เช่น ปุ่ม ช่องทำเครื่องหมาย หรือข้อความ ด้วยตนเอง ภายในหน้าต่างข้อมูลที่กำหนดเอง