Pop-ups

Selecione a plataforma: Android iOS JavaScript

Imagem de um marcador com uma janela de texto popover anexada a ele sobre a Ponte Golden Gate com uma descrição genérica da ponte

Um popover mostra conteúdo (geralmente texto ou imagens) em uma janela de balão de informações acima do mapa, em um determinado local. O popover tem uma área de conteúdo e uma ponta afunilada. A extremidade da ponta fica conectada a uma localização especificada no mapa.

Normalmente, um popover é anexado a um marcador, mas também é possível anexar um popover a uma coordenada LatLng específica.

Adicionar um popover

Para adicionar um popover, crie um objeto Popover e defina as opções dele, incluindo posição e modo de altitude. A posição é um objeto LatLng que inclui latitude, longitude e altitude, o que determina onde o popover é exibido. Se a ancoragem for em um marcador, a posição dele será usada. Você também pode controlar como a altitude é interpretada definindo o modo de altitude.

O conteúdo de um popover precisa estar contido em um AndroidView. Os popovers podem ser rolados por padrão e têm uma altura máxima predefinida.

Ancorar um popover a um marcador

É possível fixar popovers em marcadores. Ao adicionar um popover ancorado a um marcador, é necessário associar o popover a um objeto 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()
    }
}

Adicionar um popover configurado

O exemplo a seguir adiciona um popover que fecha automaticamente quando o usuário toca fora dele e não faz o movimento automático para popovers recém-abertos:

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