Cửa sổ bật lên

Chọn nền tảng: Android iOS JavaScript

Bản đồ San Francisco có điểm đánh dấu và cửa sổ bật lên phía trên Toà nhà Ferry.

Cửa sổ bật lên hiển thị nội dung (thường là văn bản hoặc hình ảnh) trong cửa sổ bong bóng thông tin phía trên bản đồ, tại một vị trí nhất định. Cửa sổ bật lên có một vùng nội dung và một thân thon. Đầu của thân được gắn vào một vị trí cụ thể trên bản đồ.

Thông thường, bạn sẽ đính kèm một cửa sổ bật lên vào một điểm đánh dấu bằng đối tượng sửa đổi .popover, nhưng bạn cũng có thể đính kèm một cửa sổ bật lên vào một toạ độ LatLng cụ thể bằng chế độ độ cao hoặc bù trừ cửa sổ bật lên đó từ một điểm đánh dấu.

Thêm cửa sổ bật lên

Để thêm cửa sổ bật lên, hãy tạo một thực thể Popover và đặt các tuỳ chọn của thực thể đó, bao gồm cả vị trí và chế độ độ cao. Vị trí là một đối tượng LatLngAltitude, xác định vị trí hiển thị cửa sổ bật lên. Bạn có thể kiểm soát cách diễn giải độ cao khi neo bằng LatLngAltitude bằng cách đặt chế độ độ cao. Nếu neo vào một điểm đánh dấu, thì vị trí của điểm đánh dấu sẽ được sử dụng.

Bạn có thể tuỳ chỉnh nội dung của cửa sổ bật lên bằng Chế độ xem SwiftUI. Bạn có thể cung cấp bố cục tuỳ chỉnh bằng cách truyền một hàm đóng của trình tạo Khung hiển thị đến thực thể Popover hoặc đối tượng sửa đổi .popover.

Thêm cửa sổ bật lên vào đối tượng LatLngAltitude

Mã mẫu sau đây thêm một cửa sổ bật lên vào đối tượng 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")
        }
      }
  }
}

Thêm cửa sổ bật lên vào điểm đánh dấu

Mã mẫu sau đây thêm một cửa sổ bật lên vào điểm đánh dấu:

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()
        }
    }
  }
}