Cửa sổ bật lên

Sản phẩm hoặc tính năng này đang trong giai đoạn thử nghiệm (trước khi phát hành rộng rãi). Các sản phẩm và tính năng trước giai đoạn phát hành rộng rãi có thể bị hạn chế về dịch vụ hỗ trợ, đồng thời những thay đổi đối với các sản phẩm và tính năng trước giai đoạn phát hành rộng rãi có thể không tương thích với các phiên bản trước giai đoạn phát hành rộng rãi khác. Các Sản phẩm trước giai đoạn phát hành rộng rãi tuân theo Điều khoản dành riêng cho dịch vụ của Nền tảng Google Maps. Để biết thêm thông tin, hãy xem nội dung mô tả về giai đoạn ra mắt.

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

Chú thích hiển thị nội dung (thường là văn bản hoặc hình ảnh) trong một cửa sổ bong bóng thông tin phía trên bản đồ, tại một vị trí nhất định. Popover có một vùng nội dung và một cuống thon. Đầu của cuống đượ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 cách sử dụng công cụ 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ể có độ cao hoặc bù đắp cho toạ độ đó so với một điểm đánh dấu.

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

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

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

Lưu ý quan trọng: Để mang lại trải nghiệm tốt nhất cho người dùng, chỉ nên mở một cửa sổ bật lên trên bản đồ tại một thời điểm. Nhiều cửa sổ bật lên sẽ khiến bản đồ trông lộn xộn.

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(latitude: 37.8270, longitude: -122.4230)) {
      Popover(
        positionAnchor: alcatraz,
        isOpen: $isOpen
      ) {
        Text("Alcatraz Island")
      }
    }
  }
}

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

Đoạn mã mẫu sau đây sẽ thêm một cửa sổ bật lên vào một đ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(latitude: 37.7955, longitude: -122.3937)) {
      Marker(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}