חלונות קופצים

בחירת פלטפורמה: Android iOS JavaScript

מפה של סן פרנסיסקו עם סמן וחלון קופץ מעל בניין המעבורות.

חלון קופץ שמציג תוכן (בדרך כלל טקסט או תמונות) בבועת מידע מעל המפה, במיקום נתון. החלון הקופץ כולל אזור תוכן וגבעול מחודד. קצה הגבעול מחובר למיקום ספציפי במפה.

בדרך כלל מצמידים את ה-popover לסמן באמצעות משנה המאפיין .popover, אבל אפשר גם להצמיד אותו לקואורדינטה ספציפית LatLng עם גובה, או להגדיר שהוא יוצג בהזחה מהסמן.

הוספת חלון קופץ

כדי להוסיף חלון קופץ, יוצרים ישות Popover ומגדירים את האפשרויות שלה, כולל המיקום ומצב הגובה. המיקום הוא אובייקט LatLngAltitude שקובע איפה יוצג ה-popover. כדי לשלוט באופן שבו הגובה מפורש כשמעגנים באמצעות 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(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()
        }
    }
  }
}