Thành phần Place Details nâng cao

Thành phần Chi tiết địa điểm phiên bản Nâng cao có các tính năng giống như Chi tiết địa điểm phiên bản Cơ bản. Thành phần này cũng cho phép bạn chọn có hiển thị tên Địa điểm hay không, định cấu hình các nút hành động của thành phần, cũng như áp dụng các lựa chọn tìm kiếm và lọc cho các bài đánh giá và nội dung nghe nhìn được hiển thị.

Cấu hình nâng cao cho Place Details

Sử dụng AdvancedPlaceDetailsView hoặc AdvancedPlaceDetailsCompactView để sử dụng các tính năng nâng cao.

Tuỳ chọn hiển thị nội dung

Bạn có thể chỉ định nội dung cần hiển thị bằng cách sử dụng enum trong AdvancedPlaceDetailsContent. Bạn có thể định cấu hình tất cả nội dung giống như Thông tin cơ bản về địa điểm, cũng như chọn có hiển thị tên Địa điểm hay không.

Định cấu hình nút hành động

Sử dụng các phương thức .cornerActions và .mainActions của AdvancedPlaceDetailsView hoặc AdvancedPlaceDetailsCompactView để xoá hoặc tuỳ chỉnh các nút hành động.

Yêu cầu về việc ghi nhận tác giả bằng hình ảnh

Chế độ xem thu gọn của Place Details có các nút có thể tuỳ chỉnh
Chế độ xem thu gọn của Chi tiết địa điểm nâng cao có nút tuỳ chỉnh

Quan trọng: Bạn phải thông báo rõ cho người dùng cuối khi nút hành động tuỳ chỉnh chia sẻ thông tin người dùng với một bên thứ ba không phải Google. Xem yêu cầu về thông tin ghi công bằng hình ảnh.

Ví dụ bên phải cho thấy một hình ảnh tuỳ chỉnh nêu rõ rằng thông tin người dùng sẽ được gửi đến "Altostrat".

Áp dụng các lựa chọn tìm kiếm và lọc

Sử dụng các phương thức .searchMediaOptions và .searchReviewOptions của AdvancedPlaceDetailsView hoặc AdvancedPlaceDetailsCompactView để bật tính năng tìm kiếm và lọc nội dung nghe nhìn hoặc bài đánh giá.

Tạo vùng nội dung tuỳ chỉnh

Các lựa chọn vị trí đặt vùng nội dung tuỳ chỉnh

Vị trí nội dung tuỳ chỉnh cho phép bạn thêm nội dung của riêng mình (chẳng hạn như bản tóm tắt do AI tạo, dấu thời gian của hành trình hoặc huy hiệu tuỳ chỉnh) ngay vào các vùng bố cục được xác định trước.

Để thêm nội dung tuỳ chỉnh, hãy sử dụng phương thức .placeDetailsCompactContentSlot của AdvancedPlaceDetailsCompactView. Các vị trí có thể đặt là .basicSectionTop và .basicSectionBottom.

Yêu cầu về thông tin ghi công và đề xuất nội dung cho các vị trí nội dung

Khi một vùng nội dung tuỳ chỉnh được gắn, thông tin công bố sẽ tự động cập nhật để làm rõ nội dung nào do Google cung cấp và nội dung nào do bên thứ ba cung cấp.

Việc nên làm

Duy trì hệ thống phân cấp trực quan rõ ràng giữa Place Details trên Google và nội dung tuỳ chỉnh để tránh gây nhầm lẫn về nguồn thông tin.

Tránh gây mơ hồ về nguồn thông tin

Việc nên làm

Cân nhắc thông tin chi tiết được bản địa hoá, có giá trị cao và phù hợp với mục tiêu trước mắt của người dùng. Nội dung phù hợp (chẳng hạn như thời gian đặt phòng theo thời gian thực hoặc tình trạng phòng trống hiện tại) giúp người dùng đưa ra quyết định nhanh hơn và sáng suốt hơn.

Cung cấp thông tin chi tiết có giá trị cao

Việc không nên làm

Đừng sao chép thông tin chi tiết hiện có về địa điểm trên Google, chẳng hạn như điểm xếp hạng, bài đánh giá hoặc giờ hoạt động, ngay cả khi bạn đã ẩn nội dung do Google cung cấp. Việc này có thể khiến người dùng nhầm lẫn về nguồn gốc của nội dung và liệu nội dung đó đến từ Google hay bên thứ ba.

Đừng sao chép Place Details hiện có về địa điểm trên Google

Việc không nên làm

Đừng đăng những tuyên bố hoặc huy hiệu không ghi rõ nguồn (ví dụ: "Đề xuất hàng đầu!") có thể bị nhầm lẫn là sự chứng thực chính thức của Google. Nội dung tuỳ chỉnh phải ghi rõ nguồn.

Không đăng lời tuyên bố hoặc huy hiệu không có nguồn gốc rõ ràng

Việc không nên làm

Đừng đưa quảng cáo, nội dung tiếp thị, chiết khấu khuyến mãi hoặc lời nhắc đăng ký vào vùng chứa địa điểm tuỳ chỉnh.

Không thêm quảng cáo, nội dung tiếp thị, chương trình giảm giá khuyến mãi hoặc lời nhắc đăng ký

Ví dụ nâng cao về Place Details

Bỏ qua tên địa điểm

Để bỏ qua Tên địa điểm, đừng thêm .name vào tham số content của AdvancedPlaceDetailsConfiguration.

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  // Query for loading the place details component.
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )
  @State private var favoritePlaces: Set<String> = []

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content:[.address()],
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { result in
        if let place = result.place {
          print("Place: \(place.description)")
        } else {
          print("Error: \(String(describing: result.error))")
        }
      }
    )
  }
}

Xoá nút hành động

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content: AdvancedPlaceDetailsView.allContent,
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { result in
        if let place = result.place {
          print("Place: \(place.description)")
        } else {
          print("Error: \(String(describing: result.error))")
        }
      }
    )
    .mainActions{ _ in
      return []
    }
  }
}

Thêm các thao tác tuỳ chỉnh và thao tác được xác định trước

Mẫu này thêm một lựa chọn để người dùng có thể thêm một địa điểm vào danh sách yêu thích hoặc bỏ thích địa điểm đó, cùng với thao tác Mở trong Maps được xác định trước.

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )
  
  @State var favoritePlaces: Set<String> = []

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content: AdvancedPlaceDetailsView.allContent,
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { result in
        if let place = result.place {
          print("Place: \(place.description)")
        } else {
          print("Error: \(String(describing: result.error))")
        }
      }
    )
    .mainActions{ place in
      var actions: [MainPlaceActionElement] = []
      let placeID = place.placeID!
      if self.favoritePlaces.contains(placeID) {
        actions.append(
          .action(
            MainPlaceAction(
              image: Image(systemName: "heart.fill"),
              label: "Unfavorite"
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      } else {
        actions.append(
          .action(
            MainPlaceAction(
              image: Image(systemName: "heart"),
              label: "Favorite"
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      }
      actions.append(.actionId(.openMap(style: .primary)))
      return actions
    }
    .cornerActions { place in
      var actions: [CornerPlaceActionElement] = []
      let placeID = place.placeID!
      if self.favoritePlaces.contains(placeID) {
        actions.append(
          .action(
            CornerPlaceAction(
              image: Image(systemName: "heart.fill"),
              accessibilityLabel: "Unfavorite",
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      } else {
        actions.append(
          .action(
            CornerPlaceAction(
              image: Image(systemName: "heart"),
              accessibilityLabel: "Favorite",
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      }
      actions.append(.actionId(.openMap(style: .primary)))
      return actions
    }
  }

  func toggleFavorite(_ placeID: String) {
    if favoritePlaces.contains(placeID) {
      favoritePlaces.remove(placeID)
    } else {
      favoritePlaces.insert(placeID)
    }
  }
}

Lọc bài đánh giá và nội dung nghe nhìn

Mã mẫu này chỉ cho thấy nội dung nghe nhìn và bài đánh giá có đề cập đến "cà phê".

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )
  let searchMediaOptions = SearchMediaOptions(query: "coffee")
  let searchReviewsOptions = SearchReviewsOptions(query: "coffee")

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content: [.media(), .reviews()],
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { _ in }
    )
    .searchMediaOptions(searchMediaOptions) { results in
      guard let result = results.first else { return }
      switch result {
      case .success(let summary):
        print("Summary: \(summary)")
      case .failure(let error):
        print("Error: \(error)")
      }
    }
    .searchReviewsOptions(searchReviewsOptions) { results in
      guard let result = results.first else { return }
      switch result {
      case .success(let summary):
        print("Summary: \(summary)")
      case .failure(let error):
        print("Error: \(error)")
      }
    }
  }
}

Tạo vị trí nội dung

Mẫu này thêm nội dung vào các vùng basicSectionTop và basicSectionBottom.

Swift

import SwiftUI
import PlacesSwift

struct ItineraryCard: View {
    static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID(peetsCoffeePlaceID)
    )

    var body: some View {
      AdvancedPlaceDetailsCompactView(
        orientation: .vertical,
        query: $query,
        configuration: AdvancedPlaceDetailsCompactConfiguration(
          content: AdvancedPlaceDetailsCompactView.allContent,
          theme: PlacesMaterialTheme()
        ),
        placeDetailsCallback: { _ in }
      )
      .placeDetailsCompactContentSlot(position: .basicSectionTop) { place in
        Text("Day 2 • 2:30 PM")
          .font(.caption)
          .fontWeight(.bold)
          .foregroundColor(.accentColor)
      }
      .placeDetailsCompactContentSlot(position: .basicSectionBottom) { place in
        VStack(alignment: .leading, spacing: 4) {
          Text("AI Notes")
            .font(.caption)
            .bold()
          Text("Great quiet atmosphere for morning meetings. Famous for house-roasted pour-overs.")
            .font(.footnote)
            .foregroundColor(.secondary)
        }
        .padding(8)
        .background(Color(.systemGray6))
        .cornerRadius(8)
      }
    }
}