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

เลือกแพลตฟอร์ม: Android iOS JavaScript

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

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

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

หมายเหตุ: หน้าต่างข้อมูลที่วาดขึ้นจะไม่ใช่ภาพสด การแสดงผลแสดงผลเป็นรูปภาพ (โดยใช้ View.draw(Canvas)) เมื่อมีการส่งคืน ซึ่งหมายความว่าหน้าต่างข้อมูลบนแผนที่จะไม่แสดงการเปลี่ยนแปลงหลังจากนั้น หากต้องการอัปเดตหน้าต่างข้อมูลในภายหลัง (เช่น หลังจากโหลดรูปภาพแล้ว) ให้เรียกใช้ showInfoWindow() นอกจากนี้ หน้าต่างข้อมูลจะไม่ดำเนินการตามการโต้ตอบปกติใดๆ สำหรับมุมมองปกติ เช่น เหตุการณ์การแตะหรือท่าทางสัมผัส แต่คุณฟังเหตุการณ์การคลิกทั่วไปในหน้าต่างข้อมูลทั้งหมดได้ตามที่อธิบายไว้ในส่วนด้านล่าง

รูปภาพด้านล่างแสดงหน้าต่างข้อมูลเริ่มต้น หน้าต่างข้อมูลที่มีเนื้อหาที่กำหนดเอง และหน้าต่างข้อมูลที่มีกรอบและพื้นหลังที่กำหนดเอง

เหตุการณ์เกี่ยวกับหน้าต่างข้อมูล

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