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 tertentu di peta.

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

Menambahkan popover

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

Konten popover dapat disesuaikan menggunakan Tampilan SwiftUI. Anda dapat menyediakan tata letak kustom dengan meneruskan penutupan pembuat View 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()
        }
    }
  }
}