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

בחירת פלטפורמה: 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(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(latitude: 37.7955, longitude: -122.3937), mode: .hybrid) {
      Marker(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}