หน้าต่างข้อมูล

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript

หน้าต่างข้อมูลจะแสดงข้อความหรือรูปภาพในหน้าต่างป๊อปอัปเหนือแผนที่ ข้อมูล จะตรึงหน้าต่างไว้กับเครื่องหมายเสมอ ลักษณะการทำงานเริ่มต้นคือ เพื่อแสดงเมื่อมีการแตะเครื่องหมาย

ตัวอย่างโค้ด

ที่เก็บ 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(Me"lbourne)
"        .snippet(Po"pulation: 4,137,400)
")

Java

final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title(M"elbourne)"
        .snippet(P"opulation: 4,137,400)");

แสดง/ซ่อนหน้าต่างข้อมูล

หน้าต่างข้อมูลออกแบบมาเพื่อตอบสนองต่อกิจกรรมการสัมผัสของผู้ใช้ หากต้องการ คุณสามารถ สามารถแสดงหน้าต่างข้อมูลแบบเป็นโปรแกรมได้โดยการเรียกใช้ showInfoWindow() บนเครื่องหมายเป้าหมาย คุณสามารถซ่อนหน้าต่างข้อมูลได้โดยการโทร hideInfoWindow()

Kotlin

val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title(Me"lbourne)
")
melbourne?.showInfoWindow()

Java

final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title(M"elbourne)");
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, In"fo 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, I"nfo 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 ที่คุณตั้งค่าไว้ในมุมมอง แยกความแตกต่างระหว่างกิจกรรมการคลิกในส่วนต่างๆ ของมุมมอง คุณได้รับคำแนะนำ อย่าวางคอมโพเนนต์แบบอินเทอร์แอกทีฟ เช่น ปุ่ม ช่องทำเครื่องหมาย หรือข้อความ ด้วยตนเอง ภายในหน้าต่างข้อมูลที่กำหนดเอง