Pop-ups

Plattform auswählen: Android iOS JavaScript

In einem Popover werden Inhalte (in der Regel Text oder Bilder) für einen bestimmten Ort in einem Infofenster über der Karte angezeigt. Das Popover besteht aus einem Inhaltsbereich und einem Hinweisstrich. Der Hinweisstrich zeigt auf eine bestimmte Position auf der Karte.

In der Regel wird ein Pop-over mit einer Markierung verknüpft. Sie können es aber auch mit einer bestimmten LatLng-Koordinate verknüpfen.

Pop‑over hinzufügen

Wenn Sie ein Pop-over hinzufügen möchten, erstellen Sie ein Popover-Objekt und legen Sie die Optionen fest, einschließlich Position und Höhenmodus. Die Position ist ein LatLng-Objekt, das den Breiten- und Längengrad sowie die Höhe enthält, die bestimmen, wo das Popover angezeigt wird. Wenn die Verankerung an einer Markierung erfolgt, wird stattdessen die Position der Markierung verwendet. Sie können auch festlegen, wie die Höhe interpretiert wird, indem Sie den Höhenmodus einstellen.

Der Inhalt eines Pop-overs muss in einer AndroidView enthalten sein. Popovers sind standardmäßig scrollbar und haben eine vordefinierte maximale Höhe.

Wichtig :Aus Gründen der Nutzerfreundlichkeit sollte nur ein Popover auf einmal auf der Karte geöffnet sein. Mehrere Pop-over-Fenster lassen die Karte unübersichtlich erscheinen.

Pop-over an einer Markierung verankern

Sie können Popovers an Markierungen verankern. Wenn Sie ein Popover hinzufügen, das an einer Markierung verankert ist, müssen Sie das Popover mit einem Marker-Objekt verknüpfen.

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()
    }
}

Konfiguriertes Popover hinzufügen

Im folgenden Beispiel wird ein Pop-over hinzugefügt, das automatisch geschlossen wird, wenn der Nutzer außerhalb des Pop-overs tippt. Außerdem wird nicht automatisch zu neu geöffneten Pop-overs geschwenkt:

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