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

בחירת פלטפורמה: 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()
        }
    }
  }
}