Pop-up'lar

Platform seçin: Android iOS JavaScript

Ferry Building üzerinde işaretçi ve popover bulunan San Francisco haritası.

Popover, haritanın üzerinde belirli bir konumda bulunan bilgi balonu penceresinde içerik (genellikle metin veya resim) gösterir. Popover'da bir içerik alanı ve konik bir gövde bulunur. Sapın ucu, haritada belirtilen bir konuma eklenir.

Genellikle .popover değiştiricisini kullanarak bir popover'ı işaretçiye eklersiniz ancak popover'ı rakım modu ile belirli bir LatLng koordinatına da ekleyebilir veya bir işaretçiden kaydırabilirsiniz.

Pop-up ekleme

Bilgi kutusu eklemek için bir Popover öğesi oluşturun ve konum ile yükseklik modu gibi seçeneklerini ayarlayın. Konum, popover'ın nerede gösterileceğini belirleyen bir LatLngAltitude nesnesidir. Yükseklik modunu ayarlayarak LatLngAltitude ile sabitleme yaparken yüksekliğin nasıl yorumlanacağını kontrol edebilirsiniz. Bir işaretçiye sabitleniyorsa bunun yerine işaretçinin konumu kullanılır.

Popover'ın içeriği SwiftUI görünümleri kullanılarak özelleştirilebilir. Popover varlığına veya .popover değiştiricisine bir View oluşturucu kapatması ileterek özel düzenler sağlayabilirsiniz.

LatLngAltitude nesnesine popover ekleme

Aşağıdaki kod örneği, bir LatLngAltitude nesnesine popover ekler:

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(center: .init(latitude: 37.8270, longitude: -122.4230)),
      mode: .hybrid) {
        Popover(
          positionAnchor: alcatraz,
          isOpen: $isOpen
        ) {
          Text("Alcatraz Island")
        }
      }
  }
}

İşaretçiye popover ekleme

Aşağıdaki kod örneği, bir işaretçiye popover ekler:

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(center: .init(latitude: 37.7955, longitude: -122.3937)),
      mode: .hybrid
    ) {
      Marker3D(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}