سرریزکننده

پلاتفرم را انتخاب کنید: Android iOS JavaScript

یک پنجره شناور محتوا (معمولاً متن یا تصاویر) را در یک پنجره حباب اطلاعاتی بالای نقشه، در یک مکان مشخص نمایش می‌دهد. پنجره بالاپر دارای یک ناحیه محتوا و یک پایه مخروطی است. نوک ساقه به مکان مشخصی در نقشه متصل است.

معمولاً یک پاپ‌اور را به یک نشانگر متصل می‌کنید، اما می‌توانید یک پاپ‌اور را به یک مختصات خاص LatLng نیز متصل کنید.

افزودن بالاپر

برای افزودن پنجره بالاپر، شیء Popover را ایجاد کنید و گزینه‌های آن را تنظیم کنید، ازجمله موقعیت و حالت ارتفاع . موقعیت یک شیء LatLng است که شامل عرض جغرافیایی، طول جغرافیایی، و ارتفاع است که تعیین می‌کند popover کجا نمایش داده شود. اگر به نشانگر لنگر شده باشد، به‌جای آن از موقعیت نشانگر استفاده می‌شود. همچنین می‌توانید با تنظیم حالت ارتفاع، نحوه تفسیر ارتفاع را کنترل کنید.

محتوای popover باید در 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)
}