คอมโพเนนต์รายละเอียดสถานที่ขั้นสูง

คอมโพเนนต์รายละเอียดสถานที่เวอร์ชันขั้นสูงมีฟีเจอร์เหมือนกับ Places Details Essentials นอกจากนี้ คุณยังเลือกได้ว่าจะให้แสดงชื่อสถานที่หรือไม่ กำหนดค่าปุ่มการทำงานของคอมโพเนนต์ และใช้ตัวเลือกการค้นหาและการกรองกับรีวิวและสื่อที่แสดง

การกำหนดค่ารายละเอียดสถานที่ขั้นสูง

ใช้ AdvancedPlaceDetailsView หรือ AdvancedPlaceDetailsCompactView เพื่อเข้าถึงฟีเจอร์ขั้นสูง

ตัวเลือกการแสดงเนื้อหา

คุณระบุเนื้อหาที่จะแสดงได้โดยใช้ Enum ใน AdvancedPlaceDetailsContent คุณสามารถกำหนดค่าเนื้อหาทั้งหมดให้เหมือนกับข้อมูลสำคัญของรายละเอียดสถานที่ รวมถึงเลือกได้ว่าจะแสดงชื่อสถานที่หรือไม่

กำหนดค่าปุ่มดำเนินการ

ใช้วิธี .cornerActions และ .mainActions ของ AdvancedPlaceDetailsView หรือ AdvancedPlaceDetailsCompactView เพื่อนำปุ่มการทำงานออกหรือปรับแต่ง

ข้อกำหนดในการระบุแหล่งที่มาด้วยภาพ

มุมมองกะทัดรัดของรายละเอียดสถานที่พร้อมปุ่มที่ปรับแต่งแล้ว
มุมมองแบบกะทัดรัดของรายละเอียดสถานที่ขั้นสูงพร้อมปุ่มที่ปรับแต่งแล้ว

สำคัญ: คุณต้องแจ้งให้ผู้ใช้ปลายทางทราบอย่างชัดเจนเมื่อปุ่มการดำเนินการที่กำหนดเองจะแชร์ข้อมูลผู้ใช้กับบุคคลที่สามที่ไม่ใช่ Google ดูข้อกำหนดในการระบุแหล่งที่มาด้วยภาพ

ตัวอย่างทางด้านขวาแสดงรูปภาพที่กำหนดเองซึ่งระบุอย่างชัดเจนว่าจะมีการส่งข้อมูลผู้ใช้ไปยัง "Altostrat"

ใช้ตัวเลือกการค้นหาและการกรอง

ใช้วิธีการ .searchMediaOptions และ .searchReviewOptions ของ AdvancedPlaceDetailsView หรือ AdvancedPlaceDetailsCompactView เพื่อเปิดใช้การค้นหาและการกรองสื่อหรือรีวิว

สร้างช่องเนื้อหาที่กำหนดเอง

ตัวเลือกตำแหน่งช่องเนื้อหาที่กำหนดเอง

ช่องเนื้อหาที่กำหนดเองช่วยให้คุณเพิ่มเนื้อหาของคุณเอง (เช่น ข้อมูลสรุปที่ AI สร้างขึ้น การประทับเวลาของแผนการเดินทาง หรือป้ายที่กำหนดเอง) ลงในโซนเลย์เอาต์ที่กำหนดไว้ล่วงหน้าได้โดยตรง

หากต้องการเพิ่มเนื้อหาที่กำหนดเอง ให้ใช้วิธี .placeDetailsCompactContentSlot ของ AdvancedPlaceDetailsCompactView ตำแหน่งที่ใช้ได้คือ .basicSectionTop และ .basicSectionBottom

ข้อกำหนดในการระบุแหล่งที่มาและคำแนะนำเกี่ยวกับเนื้อหาสำหรับช่องเนื้อหา

เมื่อติดตั้งช่องเนื้อหาที่กำหนดเอง การเปิดเผยข้อมูลจะอัปเดตโดยอัตโนมัติเพื่อชี้แจงว่าเนื้อหาใดที่ Google จัดหาให้และเนื้อหาใดที่บุคคลที่สามจัดหาให้

สิ่งที่ควรทำ

รักษาลำดับชั้นการแสดงผลที่ชัดเจนระหว่างรายละเอียดสถานที่ใน Google กับเนื้อหาที่กำหนดเองเพื่อป้องกันความคลุมเครือเกี่ยวกับแหล่งที่มาของข้อมูล

ป้องกันความคลุมเครือเกี่ยวกับแหล่งที่มาของข้อมูล

สิ่งที่ควรทำ

พิจารณาข้อมูลเชิงลึกที่มีคุณค่าสูงซึ่งแปลเป็นภาษาท้องถิ่นและปรับให้เหมาะกับเป้าหมายในทันทีของผู้ใช้ เนื้อหาที่ปรับแต่ง เช่น ระยะเวลาการจองแบบเรียลไทม์หรือห้องว่างในปัจจุบัน จะช่วยให้ผู้ใช้ตัดสินใจได้เร็วขึ้นและมีข้อมูลประกอบมากขึ้น

ให้ข้อมูลเชิงลึกที่มีคุณค่าสูง

ไม่ควรทำ

อย่าทำซ้ำรายละเอียดสถานที่ใน Google ที่มีอยู่ เช่น การให้คะแนน รีวิว หรือเวลาทำการ แม้ว่าคุณจะซ่อนเนื้อหาที่ Google จัดหาให้ก็ตาม การดำเนินการดังกล่าวอาจทำให้ผู้ใช้สับสนเกี่ยวกับแหล่งที่มาของเนื้อหาและไม่แน่ใจว่าเนื้อหามาจาก Google หรือบุคคลที่สาม

อย่านำรายละเอียดสถานที่ใน Google ที่มีอยู่แล้วมาทำซ้ำ

ไม่ควรทำ

ห้ามแสดงการกล่าวอ้างหรือป้ายที่ไม่มีการระบุแหล่งที่มา (เช่น "คำแนะนำยอดนิยม!") ซึ่งอาจทำให้เข้าใจผิดว่าเป็นคำรับรองอย่างเป็นทางการของ Google เนื้อหาที่กำหนดเองต้องระบุแหล่งที่มาอย่างชัดเจน

อย่าแสดงการกล่าวอ้างหรือป้ายที่ไม่มีการระบุแหล่งที่มา

ไม่ควรทำ

อย่าใส่โฆษณา ข้อความทางการตลาด ส่วนลดโปรโมชัน หรือข้อความแจ้งการสมัครใช้บริการภายในคอนเทนเนอร์ตำแหน่งที่กำหนดเอง

อย่าใส่โฆษณา ข้อความทางการตลาด ส่วนลดโปรโมชัน หรือข้อความแจ้งให้สมัครใช้บริการ

ตัวอย่างรายละเอียดสถานที่ขั้นสูง

ละเว้นชื่อสถานที่

หากต้องการละเว้นชื่อสถานที่ ให้ไม่ใส่ .name ในพารามิเตอร์ content ของ 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))")
        }
      }
    )
  }
}

นำปุ่มดำเนินการออก

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 []
    }
  }
}

เพิ่มการดำเนินการที่กำหนดเองและที่กำหนดไว้ล่วงหน้า

ตัวอย่างนี้จะเพิ่มตัวเลือกให้ผู้ใช้เพิ่มหรือนำสถานที่ออกจากรายการโปรด พร้อมกับการดำเนินการ Open in Maps ที่กำหนดไว้ล่วงหน้า

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

กรองรีวิวและสื่อ

ตัวอย่างโค้ดนี้แสดงเฉพาะสื่อและรีวิวที่พูดถึง "กาแฟ"

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

สร้างช่วงเวลาสำหรับเนื้อหา

ตัวอย่างนี้จะเพิ่มเนื้อหาลงในช่อง basicSectionTop และ 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)
      }
    }
}