Wyskakujące okienka

Wybierz platformę: Android iOS JavaScript

Obraz markera z wyskakującym okienkiem tekstowym przymocowanym do markera nad mostem Golden Gate z ogólnym opisem mostu

Wyskakujące okienko wyświetla treści (zwykle tekst lub obrazy) w oknie informacyjnym nad mapą w określonej lokalizacji. Wyskakujące okienko ma obszar treści i zwężającą się nóżkę. Koniec ramienia jest przymocowany do określonego miejsca na mapie.

Zazwyczaj wyskakujące okienko jest dołączane do markera, ale można je też dołączyć do określonych LatLng współrzędnych.

Dodawanie wyskakującego okienka

Aby dodać wyskakujące okienko, utwórz obiekt Popover i skonfiguruj jego opcje, w tym tryb pozycji i wysokości. Pozycja to obiekt LatLng, który zawiera szerokość i długość geograficzną oraz wysokość, co określa miejsce wyświetlania wyskakującego okienka. Jeśli punkt zakotwiczenia jest powiązany ze znacznikiem, zamiast niego jest używana pozycja znacznika. Możesz też określić sposób interpretacji wysokości, ustawiając tryb wysokości.

Treść wyskakującego okienka musi być zawarta w elemencie AndroidView. Wyskakujące okienka można domyślnie przewijać i mają one zdefiniowaną maksymalną wysokość.

Przywiązywanie wyskakującego okienka do znacznika

Możesz przypinać wyskakujące okienka do markerów. Podczas dodawania wyskakującego okienka zakotwiczonego na znaczniku 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)
}