ป๊อปอัป

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

รูปภาพเครื่องหมายที่มีหน้าต่างข้อความป๊อปโอเวอร์ติดอยู่กับเครื่องหมายเหนือสะพานโกลเดนเกตพร้อมคำอธิบายทั่วไปของสะพาน

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

โดยปกติแล้วคุณจะแนบป๊อปโอเวอร์กับ ตัวทำเครื่องหมาย แต่คุณยัง แนบป๊อปโอเวอร์กับพิกัด LatLng ที่เฉพาะเจาะจงได้ด้วย

เพิ่มป๊อปโอเวอร์

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

เนื้อหาของป๊อปโอเวอร์ต้องอยู่ใน AndroidView ป๊อปโอเวอร์เลื่อนได้โดยค่าเริ่มต้นและมีความสูงสูงสุดที่กำหนดไว้ล่วงหน้า

ยึดป๊อปโอเวอร์กับเครื่องหมาย

คุณสามารถยึดป๊อปโอเวอร์กับเครื่องหมายได้ เมื่อเพิ่มป๊อปโอเวอร์ที่ยึดกับตัวทำเครื่องหมาย คุณต้องเชื่อมโยงป๊อปโอเวอร์กับออบเจ็กต์ Marker

class MapManager(private val map: MapView) {

    /**
     * Adds a popover anchored to a marker.
     * @param context The Context required to instantiate UI views.
     */
    fun addPopoverToMarker(context: Context) {
        // 1. Create a marker
        val markerOptions = markerOptions {
            position = latLngAltitude {
                latitude = 37.422
                longitude = -122.084
                altitude = 0.0
            }
        }

        val marker = map.addMarker(markerOptions) ?: return

        // 2. Create the custom view using the passed-in context
        val textView = TextView(context).apply {
            text = context.getString(R.string.popover_hello)
            setPadding(16, 16, 16, 16)
            setBackgroundColor(Color.WHITE)
            setTextColor(Color.BLACK)
        }

        // 3. Configure and display the popover
        val options = popoverOptions {
            content = textView
            positionAnchor = marker
            altitudeMode = AltitudeMode.RELATIVE_TO_GROUND
        }

        val popover = map.addPopover(options)
        popover.show()
    }
}

เพิ่มป๊อปโอเวอร์ที่กำหนดค่าไว้

ตัวอย่างต่อไปนี้จะเพิ่มป๊อปโอเวอร์ที่จะปิดโดยอัตโนมัติเมื่อผู้ใช้แตะนอกป๊อปโอเวอร์ และจะไม่เลื่อนไปที่ป๊อปโอเวอร์ที่เปิดขึ้นใหม่โดยอัตโนมัติ

/**
 * Adds a configured popover (auto-close enabled, auto-pan disabled).
 * @param context The Context used to inflate the UI and retrieve string resources.
 */
fun addConfiguredPopover(context: Context) {
    // 1. Initialize the view with the explicit context
    val textView = TextView(context).apply {
        text = context.getString(com.example.snippets.common.R.string.popover_info)
        setPadding(12, 12, 12, 12)
        setBackgroundColor(Color.WHITE)
        setTextColor(Color.BLACK)
    }

    // 2. Configure popover behavior
    val options = popoverOptions {
        content = textView
        // Setting a fixed coordinate anchor
        positionAnchor = latLngAltitude {
            latitude = 0.0
            longitude = 0.0
            altitude = 0.0
        }
        autoCloseEnabled = true // Closes automatically when the map is tapped elsewhere
        autoPanEnabled = false  // Map camera remains stationary when popover appears
    }

    // 3. Add to the map instance
    map.addPopover(options)
}