Pop-up'lar

Platform seçin: Android iOS JavaScript

San Francisco haritasında Ferry Building üzerinde işaretçi ve pop-up.

Bir pop-over, haritanın üzerinde belirli bir konumda bilgi baloncuğu penceresinde içerik (genellikle metin veya resim) gösterir. Pop-over'da içerik alanı ve konik bir gövde bulunur. Sapın ucu, haritada belirtilen bir konuma bağlıdır.

Genellikle .popover değiştiricisini kullanarak bir popover'ı işaretçiye eklersiniz ancak popover'ı belirli bir LatLng koordinata da ekleyebilir veya işaretçiden uzaklaştırabilirsiniz.

Popover ekleme

Bir popover eklemek için Popover öğesi oluşturun ve konum ile yükseklik modu da dahil olmak üzere seçeneklerini ayarlayın. Konum, popover'ın nerede görüntüleneceğini belirleyen bir LatLngAltitude nesnesidir. Rakım modunu ayarlayarak LatLngAltitude ile sabitleme sırasında rakımın nasıl yorumlanacağını kontrol edebilirsiniz. Bir işaretçiye sabitleniyorsa bunun yerine işaretçinin konumu kullanılır.

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

LatLngAltitude nesnesine popover ekleme

Aşağıdaki kod örneği, 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(latitude: 37.8270, longitude: -122.4230)) {
      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(latitude: 37.7955, longitude: -122.3937)) {
      Marker(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}