Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

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

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

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.

Các lựa 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 các enum trong AdvancedPlaceDetailsContent. Bạn có thể định cấu hình tất cả nội dung tương tự như Thông tin cơ bản về địa điểm, cũng như chọn xem tên Địa điểm có xuất hiện 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 thao tác.

Yêu cầu về thông tin ghi công bằng hình ảnh

Chế độ xem thu gọn thông tin chi tiết về địa điểm có các nút tuỳ chỉnh — Chế độ xem thu gọn Place Details nâng cao có nút tuỳ chỉnh

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

Ví dụ ở bên phải cho thấy một hình ảnh tuỳ chỉnh giúp người dùng biết rõ rằng thông tin của họ 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 cho nội dung nghe nhìn hoặc bài đánh giá.

Tạo vị trí nội dung tuỳ chỉnh

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

Các 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 trong hành trình hoặc huy hiệu tuỳ chỉnh) trực tiếp 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òn trống là .basicSectionTop và .basicSectionBottom.

Lưu ý: Các khe nội dung tuỳ chỉnh chỉ được hỗ trợ trong AdvancedPlaceDetailsCompactView.

Yêu cầu về việc phân bổ và đề xuất nội dung cho các vị trí nội dung

Khi một vị trí 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.

Tránh gây nhầm lẫn về nguồn thông tin — Việc nên làm

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

Cung cấp thông tin chi tiết có giá trị cao — Việc nên làm

Hãy cân nhắc những thông tin chi tiết có giá trị cao, 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 như khung giờ đặt phòng theo thời gian thực hoặc tình trạng còn phòng hiện tại giúp người dùng đưa ra quyết định nhanh chóng và sáng suốt hơn.

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

Khô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à không biết nội dung đó đến từ Google hay bên thứ ba.

Không đăng lời tuyên bố hoặc huy hiệu không có thông tin xác nhận quyền sở hữu — Việc không nên làm

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

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

Đừng thêm 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ý trong vùng chứa địa điểm tuỳ chỉnh.

Ví dụ về Advanced 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á các 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 xác định trước

Mẫu này thêm một lựa chọn để người dùng đánh dấu hoặc bỏ đánh dấu một địa điểm là địa điểm yêu thích, 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ị trí 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)
      }
    }
}