النوافذ المنبثقة

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

يعرض العنصر المنبثق المحتوى (عادةً ما يكون نصًا أو صورًا) في نافذة فقاعة معلومات فوق الخريطة، في موقع جغرافي معيّن. يحتوي النافذة المنبثقة على منطقة محتوى وجذع مدبب. يتم إرفاق طرف الساق بموقع محدد على الخريطة.

عادةً ما يتم إرفاق نافذة منبثقة بعلامة باستخدام المُعدِّل .popover ، ولكن يمكنك أيضًا إرفاق نافذة منبثقة بإحداثيات LatLng معيّنة باستخدام وضع الارتفاع ، أو إزاحتها عن علامة.

إضافة نافذة منبثقة

لإضافة نافذة منبثقة، أنشئ كيان Popover واضبط خياراته، بما في ذلك الموضع ووضع الارتفاع. الموضع هو عنصر LatLngAltitude، يحدّد مكان عرض النافذة المنبثقة. يمكنك التحكّم في كيفية تفسير الارتفاع عند التثبيت حسب LatLngAltitude من خلال ضبط وضع الارتفاع. في حال التثبيت بعلامة، يتم استخدام موضع العلامة بدلاً من ذلك.

يمكن تخصيص محتوى النافذة المنبثقة باستخدام طرق عرض SwiftUI. يمكنك توفير تنسيقات مخصّصة من خلال تمرير دالة إغلاق View builder إلى الكيان 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()
        }
    }
  }
}