팝오버

플랫폼 선택: Android iOS JavaScript

페리 빌딩 위에 마커와 팝오버가 있는 샌프란시스코 지도

팝오버는 지도 위의 지정된 위치에 정보 풍선 창으로 콘텐츠 (보통 텍스트나 이미지)를 표시합니다. 팝오버는 콘텐츠 영역과 꼬리표로 이루어집니다. 꼬리표의 끝은 지정된 위치에 연결됩니다.

일반적으로 마커에 팝오버를 연결하는 데 .popover 수정자를 사용하지만, 고도가 있는 특정 LatLng 좌표 에 팝오버를 연결하거나 마커에서 팝오버를 오프셋할 수도 있습니다.

팝오버 추가

팝오버를 추가하려면 Popover 항목을 만들고 위치 및 고도 모드를 비롯한 옵션을 설정합니다. 위치는 팝오버가 표시되는 위치를 결정하는 LatLngAltitude 객체입니다. 고도 모드를 설정하여 LatLngAltitude로 고정할 때 고도가 해석되는 방식을 제어할 수 있습니다. 마커에 고정하는 경우 마커의 위치가 대신 사용됩니다.

팝오버의 콘텐츠는 SwiftUI 뷰를 사용하여 맞춤설정할 수 있습니다. 뷰 빌더 클로저를 Popover 항목 또는 .popover 수정자에 전달하여 맞춤 레이아웃을 제공할 수 있습니다.

LatLngAltitude 객체에 팝오버 추가

다음 코드 샘플은 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")
      }
    }
  }
}

마커에 팝오버 추가

다음 코드 샘플은 마커에 팝오버를 추가합니다.

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()
        }
    }
  }
}