Wyskakujące okienka

Wybierz platformę: Android iOS JavaScript

Obraz przedstawiający znacznik z wyskakującym okienkiem tekstowym przymocowanym do znacznika nad mostem Golden Gate z ogólnym opisem mostu

Wyskakujące okienko wyświetla treści (zwykle tekst lub obrazy) w dymku informacyjnym nad mapą w danej lokalizacji. Wyskakujące okienko ma obszar treści i zwężający się trzon. Koniec trzonu jest przymocowany do określonej lokalizacji na mapie.

Zwykle wyskakujące okienko jest dołączane do znacznika, ale można je też dołączyć do konkretnych LatLng współrzędnych.

Dodawanie wyskakującego okienka

Aby dodać wyskakujące okienko, utwórz obiekt Popover i ustaw jego opcje, w tym tryb pozycji i wysokości. Pozycja to obiekt LatLng, który zawiera szerokość, długość i wysokość geograficzną określającą, gdzie ma się wyświetlać wyskakujące okienko. Jeśli wyskakujące okienko jest zakotwiczone do znacznika, zamiast tego używana jest pozycja znacznika. Możesz też określić, jak interpretować wysokość geograficzną, ustawiając tryb wysokości.

Treść wyskakującego okienka musi znajdować się w obrębie an AndroidView. Wyskakujące okienka można domyślnie przewijać i mają one predefiniowaną maksymalną wysokość.

Zakotwiczanie wyskakującego okienka do znacznika

Wyskakujące okienka można zakotwiczać do znaczników. Gdy dodajesz wyskakujące okienko zakotwiczone do znacznika, musisz powiązać je z obiektem 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()
    }
}

Dodawanie skonfigurowanego wyskakującego okienka

Poniższy przykład dodaje wyskakujące okienko, które zamyka się automatycznie, gdy użytkownik kliknie poza nim, i nie przesuwa się automatycznie do nowo otwartych wyskakujących okienek:

/**
 * 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)
}