سرریزکننده

پلاتفرم را انتخاب کنید: Android iOS JavaScript

یک پنجره شناور محتوا (معمولاً متن یا تصاویر) را در یک پنجره حباب اطلاعاتی بالای نقشه، در یک مکان مشخص نمایش می‌دهد. پنجره بالاپر دارای یک ناحیه محتوا و یک پایه مخروطی است. نوک ساقه به مکان مشخصی در نقشه متصل است.

معمولاً بااستفاده از اصلاح‌کننده .popover، یک پاپ‌اور را به یک نشانگر متصل می‌کنید، اما می‌توانید یک پاپ‌اور را به یک مختصات خاص LatLng با حالت ارتفاع متصل کنید یا آن را از یک نشانگر جابه‌جا کنید.

افزودن بالاپر

برای افزودن پنجره بالاپر، یک موجودیت Popover ایجاد کنید و گزینه‌های آن را تنظیم کنید، ازجمله موقعیت و حالت ارتفاع. موقعیت یک شیء LatLngAltitude است، که تعیین می‌کند منوی بالاپر کجا نمایش داده شود. با تنظیم حالت ارتفاع، می‌توانید کنترل کنید که ارتفاع هنگام لنگر انداختن با LatLngAltitude چگونه تفسیر شود. اگر به نشانگر لنگر شده باشد، به‌جای آن از موقعیت نشانگر استفاده می‌شود.

محتوای منوی بالاپَر را می‌توان بااستفاده از SwiftUI Views سفارشی‌سازی کرد. می‌توانید با ارسال یک بسته سازنده «نما» به موجودیت 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(center: .init(latitude: 37.8270, longitude: -122.4230)),
      mode: .hybrid) {
        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(center: .init(latitude: 37.7955, longitude: -122.3937)),
      mode: .hybrid
    ) {
      Marker3D(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}