Popover

Pilih platform: Android iOS JavaScript

Gambar penanda dengan jendela teks popover yang terpasang pada penanda di atas Golden Gate Bridge dengan deskripsi umum jembatan

Popover menampilkan konten (biasanya teks atau gambar) dalam jendela balon info di atas peta, di lokasi tertentu. Popover memiliki area konten dan batang meruncing. Ujung batang dilekatkan ke lokasi tertentu di peta.

Biasanya Anda akan melampirkan popover ke penanda, tetapi Anda juga dapat melampirkan popover ke koordinat LatLng tertentu.

Menambahkan popover

Untuk menambahkan popover, buat objek Popover dan tetapkan opsinya, termasuk posisi dan mode ketinggian. Posisi adalah objek LatLng yang mencakup garis lintang, bujur, dan ketinggian yang menentukan tempat popover ditampilkan. Jika ditambatkan ke penanda, posisi penanda akan digunakan. Anda juga dapat mengontrol cara ketinggian ditafsirkan dengan menyetel mode ketinggian.

Konten popover harus berada dalam AndroidView. Popover dapat di-scroll secara default, dan memiliki tinggi maksimum yang telah ditentukan sebelumnya.

Menyematkan popover ke penanda

Anda dapat menambatkan popover ke penanda. Saat menambahkan popover yang di-anchor ke penanda, Anda perlu mengaitkan popover dengan objek 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()
    }
}

Menambahkan popover yang dikonfigurasi

Contoh berikut menambahkan popover yang otomatis ditutup saat pengguna mengetuk di luar popover, dan tidak otomatis melakukan penyesuaian ke popover yang baru dibuka:

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