النوافذ المنبثقة

اختيار النظام الأساسي: 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)
}