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

เลือกแพลตฟอร์ม: Android 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("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()
if (melbourne?.isInfoWindowShown == true) {
    melbourne.hideInfoWindow()
}

Java

final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne =
        map.addMarker(new MarkerOptions().position(melbourneLatLng).title("Melbourne"));
melbourne.showInfoWindow();
if (melbourne.isInfoWindowShown()) {
    melbourne.hideInfoWindow();
}

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

หน้าต่างข้อมูลที่กำหนดเอง

นอกจากนี้ คุณยังปรับแต่งเนื้อหาและการออกแบบหน้าต่างข้อมูลได้ด้วย โดยคุณต้องสร้างการติดตั้งใช้งานที่เป็นรูปธรรมของอินเทอร์เฟซ 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

map.setOnInfoWindowClickListener { marker ->
    Toast.makeText(
        context,
        "Info window clicked",
        Toast.LENGTH_SHORT,
    ).show()
}

Java

map.setOnInfoWindowClickListener(
        new GoogleMap.OnInfoWindowClickListener() {
            @Override
            public void onInfoWindowClick(Marker marker) {
                Toast.makeText(context, "Info window clicked", Toast.LENGTH_SHORT).show();
            }
        });

ในทำนองเดียวกัน คุณสามารถฟังกิจกรรมการคลิกค้างด้วย OnInfoWindowLongClickListener ซึ่งตั้งค่าได้โดยเรียกใช้ GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) ฟังก์ชันรอนี้ทำงานคล้ายกับฟังก์ชันรอคลิก และจะได้รับการแจ้งเตือนเกี่ยวกับกิจกรรมการคลิกค้างด้วย Callback onInfoWindowClose(Marker)

หากต้องการรับการแจ้งเตือนเมื่อหน้าต่างข้อมูลปิดลง ให้ใช้ OnInfoWindowCloseListener ซึ่งคุณตั้งค่าได้โดยเรียกใช้ GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) คุณจะได้รับการติดต่อกลับจาก onInfoWindowClose(Marker)

หมายเหตุเกี่ยวกับการรีเฟรชหน้าต่างข้อมูล: เหตุการณ์ onInfoWindowClose() จะเริ่มทำงานหากผู้ใช้รีเฟรชหน้าต่างข้อมูลโดยแตะเครื่องหมายที่มีหน้าต่างข้อมูลเปิดอยู่แล้ว แต่หากคุณเรียกใช้ Marker.showInfoWindow() แบบเป็นโปรแกรมในหน้าต่างข้อมูลที่เปิดอยู่ เหตุการณ์ onInfoWindowClose() จะไม่เริ่มทำงาน ลักษณะการทำงานอย่างหลังจะอิงตามสมมติฐานที่ว่าคุณทราบว่าหน้าต่างข้อมูลจะปิดและเปิดใหม่

ตามที่กล่าวไว้ในส่วนก่อนหน้าเกี่ยวกับหน้าต่างข้อมูล หน้าต่างข้อมูลไม่ใช่การดูแบบสด แต่ระบบจะแสดงผลมุมมองเป็นรูปภาพบนแผนที่แทน ด้วยเหตุนี้ ระบบจึงไม่สนใจ Listener ที่คุณตั้งค่าไว้ในมุมมอง และคุณไม่สามารถแยกความแตกต่างระหว่างกิจกรรมการคลิกในส่วนต่างๆ ของมุมมองได้ เราขอแนะนำไม่ให้วางคอมโพเนนต์แบบอินเทอร์แอกทีฟ เช่น ปุ่ม ช่องทำเครื่องหมาย หรือการป้อนข้อความไว้ในหน้าต่างข้อมูลที่กำหนดเอง