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

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

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

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

בדרך כלל מצמידים את ה-popover לסמן באמצעות משנה המאפיינים .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)) {
      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()
        }
    }
  }
}