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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript

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

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

ที่เก็บ ApiDemos ใน GitHub มีตัวอย่างที่แสดงฟีเจอร์ทั้งหมดของหน้าต่างข้อมูล

  • MarkerDemoActivity - Java: การปรับแต่งหน้าต่างข้อมูลและการใช้ Listener หน้าต่างข้อมูล
  • MarkerDemoActivity - Kotlin: การปรับแต่งหน้าต่างข้อมูลและการใช้ Listener หน้าต่างข้อมูล

ข้อมูลเบื้องต้น

หน้าต่างข้อมูลช่วยให้คุณแสดงข้อมูลแก่ผู้ใช้เมื่อผู้ใช้แตะที่เครื่องหมาย ระบบจะแสดงหน้าต่างข้อมูลเพียงครั้งละ 1 หน้าต่างเท่านั้น หากผู้ใช้คลิกที่เครื่องหมาย หน้าต่างข้อมูลปัจจุบันจะปิดลงและหน้าต่างข้อมูลใหม่จะปรากฏขึ้น โปรดทราบว่าหากผู้ใช้คลิกเครื่องหมายที่แสดงหน้าต่างข้อมูลอยู่ หน้าต่างข้อมูลจะปิดและเปิดขึ้นมาใหม่

หน้าต่างข้อมูลจะวาดโดยสัมพันธ์กับหน้าจอของอุปกรณ์ โดยมีศูนย์กลางอยู่เหนือเครื่องหมายที่เกี่ยวข้อง หน้าต่างข้อมูลเริ่มต้นจะแสดงชื่อเป็นตัวหนา พร้อมข้อความตัวอย่าง (ไม่บังคับ) ใต้ชื่อ

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

วิธีที่ง่ายที่สุดในการเพิ่มหน้าต่างข้อมูลคือการตั้งค่าเมธอดของ title() และ snippet() ของเครื่องหมายที่เกี่ยวข้อง การตั้งค่าพร็อพเพอร์ตี้เหล่านี้จะทําให้หน้าต่างข้อมูลปรากฏขึ้นเมื่อมีการคลิกเครื่องหมาย

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"));

Kotlin


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
)

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

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

Java


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

Kotlin


val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    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) และหน้าต่างข้อมูลจะไฮไลต์เป็นสีไฮไลต์เริ่มต้น (สีเทา)

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();
    }
}

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()
    }
}

ในทํานองเดียวกัน คุณก็ฟังเหตุการณ์การคลิกแบบยาวได้ด้วย OnInfoWindowLongClickListener ซึ่งตั้งค่าได้ด้วยการโทร GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) Listener นี้มีลักษณะการทํางานคล้ายกับ Listener การคลิก และจะได้รับการแจ้งเตือนเกี่ยวกับเหตุการณ์การคลิกแบบยาวด้วยการติดต่อกลับของ onInfoWindowClose(Marker)

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

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

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