Pop-ups

Sélectionnez une plate-forme : Android iOS JavaScript

Image d'un repère avec une fenêtre pop-up de texte qui y est associée, au-dessus du Golden Gate Bridge, avec une description générique du pont

Un pop-over affiche du contenu (généralement du texte ou des images) dans une fenêtre d'infobulle au-dessus de la carte, à un emplacement donné. Le pop-over se compose d'une zone de contenu et d'un pied effilé. L'extrémité du pied est reliée à un point géographique spécifié sur la carte.

En général, vous associez un pop-up à un repère, mais vous pouvez également l'associer à une coordonnée LatLng spécifique.

Ajouter un pop-over

Pour ajouter un pop-over, créez un objet Popover et définissez ses options, y compris le mode de position et d'altitude. La position est un objet LatLng qui inclut la latitude, la longitude et l'altitude, ce qui détermine l'emplacement du pop-over. Si l'ancrage se fait sur un repère, la position de ce repère est utilisée à la place. Vous pouvez également contrôler l'interprétation de l'altitude en définissant le mode d'altitude.

Le contenu d'un pop-up doit être contenu dans un AndroidView. Les pop-overs sont défilables par défaut et ont une hauteur maximale prédéfinie.

Ancrer un pop-over à un repère

Vous pouvez ancrer des popovers à des repères. Lorsque vous ajoutez un pop-up ancré à un repère, vous devez l'associer à un objet 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()
    }
}

Ajouter un pop-over configuré

L'exemple suivant ajoute un pop-over qui se ferme automatiquement lorsque l'utilisateur appuie en dehors du pop-over et qui ne fait pas automatiquement de panoramique vers les pop-overs nouvellement ouverts :

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