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

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