Popover

Pilih platform: Android iOS JavaScript

Peta San Francisco dengan penanda dan popover di atas Ferry Building.

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 yang ditentukan pada peta.

Biasanya, Anda akan melampirkan popover ke a penanda menggunakan .popover pengubah, tetapi Anda juga dapat melampirkan popover ke koordinat LatLng tertentu dengan ketinggian, atau mengimbanginya dari penanda.

Menambahkan popover

Untuk menambahkan popover, buat entity Popover dan tetapkan opsi-opsinya, termasuk mode posisi dan ketinggian. Posisi adalah objek LatLngAltitude, yang menentukan tempat popover ditampilkan. Anda dapat mengontrol cara ketinggian ditafsirkan saat melakukan anchoring dengan LatLngAltitude dengan menetapkan mode ketinggian. Jika melakukan anchoring ke penanda, posisi penanda akan digunakan.

Konten popover dapat disesuaikan menggunakan Tampilan SwiftUI. Anda dapat menyediakan tata letak kustom dengan meneruskan penutupan pembuat Tampilan ke entity Popover atau pengubah .popover.

Menambahkan popover ke objek LatLngAltitude

Contoh kode berikut menambahkan popover ke objek LatLngAltitude:

import GoogleMaps3D
import SwiftUI

struct SimpleCoordinatePopover: View {
  @State private var isOpen = true
  // Alcatraz Island coordinates
  private let alcatraz = LatLngAltitude(latitude: 37.8270, longitude: -122.4230)

  var body: some View {
    Map(initialCamera: .init(latitude: 37.8270, longitude: -122.4230)) {
      Popover(
        positionAnchor: alcatraz,
        isOpen: $isOpen
      ) {
        Text("Alcatraz Island")
      }
    }
  }
}

Menambahkan popover ke penanda

Contoh kode berikut menambahkan popover ke penanda:

import GoogleMaps3D
import SwiftUI

struct SimpleMarkerPopover: View {
  @State private var isOpen = false
  // Ferry Building coordinates
  private let ferryBuilding = LatLngAltitude(latitude: 37.7955, longitude: -122.3937)

  var body: some View {
    Map(initialCamera: .init(latitude: 37.7955, longitude: -122.3937)) {
      Marker(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}