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

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

คุณใช้คอมโพเนนต์รายละเอียดสถานที่ได้โดยอิสระหรือใช้ร่วมกับ API และบริการอื่นๆ ของ Google Maps Platform คอมโพเนนต์จะใช้รหัสสถานที่ ชื่อทรัพยากร หรือพิกัดละติจูด/ลองจิจูด และแสดงข้อมูลรายละเอียดสถานที่ที่แสดงผล

คอมโพเนนต์รายละเอียดสถานที่สามารถปรับแต่งธีมได้อย่างเต็มที่ ซึ่งช่วยให้คุณปรับแต่งแบบอักษร สี และรัศมีมุมให้ตรงกับกรณีการใช้งานและหลักเกณฑ์การสร้างแบรนด์ด้วยภาพได้ คุณปรับแต่งลักษณะที่รายละเอียดสถานที่ปรากฏได้โดยระบุค่า PlacesMaterialTheme ที่กำหนดเอง นอกจากนี้ คุณยังปรับแต่งช่องรายละเอียดสถานที่ที่จะรวมได้โดยระบุรายการของรายการ PlaceDetailsCompactView ซึ่งแต่ละรายการจะสอดคล้องกับข้อมูลที่แสดงเกี่ยวกับสถานที่

รูปแบบเลย์เอาต์

คอมโพเนนต์รายละเอียดสถานที่รองรับเลย์เอาต์หลัก 2 รูปแบบ ได้แก่

• กะทัดรัด: เลย์เอาต์สำหรับแสดงตัวอย่างข้อมูลสำคัญ
• แบบเต็ม: เลย์เอาต์ที่ครอบคลุมซึ่งแสดงรายละเอียดสถานที่ทั้งหมดที่พร้อมใช้งาน

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

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

มุมมองแบบกะทัดรัดของรายละเอียดสถานที่

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

มุมมองแบบเต็มของรายละเอียดสถานที่

มุมมองแบบเต็มของรายละเอียดสถานที่ (PlaceDetailsView) มีพื้นที่ขนาดใหญ่ขึ้นเพื่อแสดงข้อมูลรายละเอียดสถานที่ และช่วยให้คุณแสดงข้อมูลได้หลายประเภทมากขึ้น

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

คุณระบุเนื้อหาที่จะแสดงได้โดยใช้ Enum ใน PlaceDetailsCompactContent หรือ PlaceDetailsContent

การเรียกเก็บเงิน

เมื่อใช้ UI Kit ของรายละเอียดสถานที่ ระบบจะเรียกเก็บเงินจากคุณทุกครั้งที่มีการเรียกใช้เมธอด PlaceDetailsQuery หากโหลดสถานที่เดียวกันหลายครั้ง ระบบจะเรียกเก็บเงินสำหรับการขอแต่ละครั้ง

เพิ่มรายละเอียดสถานที่ลงในแอป

คอมโพเนนต์รายละเอียดสถานที่คือ Swift UI View คุณปรับแต่งรูปลักษณ์ของข้อมูลรายละเอียดสถานที่ให้เหมาะกับความต้องการและรูปลักษณ์ของแอปได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการปรับแต่ง

คุณเลือกโหลดคอมโพเนนต์รายละเอียดสถานที่ด้วยรหัสสถานที่ ชื่อทรัพยากร หรือพิกัดละติจูด/ลองจิจูดได้ คุณเลือกวิธีใดก็ได้หรือจะเลือกหลายวิธีก็ได้ ตั้งค่า identifier ในโครงสร้าง PlaceDetailsQuery เป็น .placeID, .resourceName หรือ .coordinate

ตําแหน่งเริ่มต้นสําหรับมุมมองแบบกะทัดรัดคือแนวตั้ง หากต้องการเลย์เอาต์แนวนอน ให้ระบุ orientation: .horizontal ใน PlaceDetailsCompactView นอกจากนี้ คุณยังระบุ orientation: .vertical เพื่อให้ชัดเจนได้ด้วย โดยจะแสดงมุมมองแบบเต็มได้ในแนวตั้งเท่านั้น

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

ปรับแต่งลักษณะที่ปรากฏ

การจัดรูปแบบที่กำหนดเอง

คุณปรับแต่งสี การพิมพ์ ระยะห่าง เส้นขอบ และมุมของคอมโพเนนต์รายละเอียดสถานที่ได้

ชุดเครื่องมือ UI ของ Places มีแนวทางระบบการออกแบบสำหรับการปรับแต่งภาพโดยอิงตาม Material Design โดยประมาณ (มีการแก้ไขบางอย่างที่เฉพาะเจาะจงสำหรับ Google Maps) ดูข้อมูลอ้างอิงของ Material Design สำหรับสีและการพิมพ์ โดยค่าเริ่มต้น สไตล์จะเป็นไปตามภาษาการออกแบบภาพของ Google Maps

UI Kit ของ Places มีธีมมืดเป็นค่าเริ่มต้น คุณจึงอาจต้องปรับแต่งทั้งธีมมืดและธีมสว่าง หากต้องการปรับแต่งธีมมืด ให้เพิ่มค่าสำหรับ .dark และ attribution.darkModeColor ลงในธีมที่กำหนดเอง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบได้ที่ส่วนการจัดรูปแบบที่กำหนดเอง

การปรับแต่งความกว้างและความสูง

มุมมองแบบกะทัดรัด

ความกว้างที่แนะนำ

• การวางแนวตั้ง: ระหว่าง 180 พิกเซลถึง 300 พิกเซล
• แนวนอน: ระหว่าง 180 ถึง 500 พิกเซล

แนวทางปฏิบัติแนะนำคือไม่ควรกำหนดความสูงสำหรับมุมมองแบบกะทัดรัด ซึ่งจะช่วยให้เนื้อหาในหน้าต่างกำหนดความสูงได้ ทำให้แสดงข้อมูลทั้งหมดได้

ความกว้างที่เล็กกว่า 160 พิกเซลอาจแสดงผลไม่ถูกต้อง

ทั้งเล่ม

สำหรับมุมมองแบบเต็ม ความกว้างที่แนะนำคือระหว่าง 250 พิกเซลถึง 450 พิกเซล ความกว้างที่เล็กกว่า 250 พิกเซลอาจแสดงผลไม่ถูกต้อง

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

แนวทางปฏิบัติแนะนำคือการตั้งค่าความสูงสำหรับการดูแบบเต็ม ซึ่งจะช่วยให้เนื้อหาในหน้าต่างเลื่อนได้อย่างถูกต้อง

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

สร้างมุมมองแบบเต็มด้วยเลย์เอาต์แนวตั้ง

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

สร้างมุมมองแบบกะทัดรัดด้วยเลย์เอาต์แนวนอน

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

สร้างมุมมองแบบเต็มด้วยเลย์เอาต์แนวตั้ง

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme = PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

ปรับแต่งแอตทริบิวต์รูปแบบ

ตัวอย่างนี้แสดงวิธีปรับแต่งแอตทริบิวต์รูปแบบเริ่มต้นของมุมมองแบบเต็มหรือแบบกะทัดรัด

UI Kit ของ Places มีธีมมืดเป็นค่าเริ่มต้น คุณจึงอาจต้องปรับแต่งทั้งธีมมืดและธีมสว่าง หากต้องการปรับแต่งธีมมืด ให้เพิ่มค่าสำหรับ .dark และ attribution.darkModeColor ลงในธีมที่กำหนดเอง

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  color.outlineDecorative = (colorScheme == .dark ? .white : .black)
  color.onSurface = (colorScheme == .dark ? .yellow : .red)
  color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
  color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
  color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
  color.positive = (colorScheme == .dark ? .yellow : .red)
  color.primary = (colorScheme == .dark ? .yellow : .purple)
  color.info = (colorScheme == .dark ? .yellow : .purple)
  var shape = PlacesMaterialShape()
  shape.cornerRadius = 10
  var font = PlacesMaterialFont()
  font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
  font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
  font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
  font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
  var attribution = PlacesMaterialAttribution()
  attribution.lightModeColor = .black
  attribution.darkModeColor = .white
  theme.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

แสดงเนื้อหาที่เฉพาะเจาะจง

ตัวอย่างนี้สร้างมุมมองแบบกะทัดรัดที่แสดงเฉพาะสื่อ ที่อยู่ การให้คะแนน และประเภท โดยใช้ธีมที่สร้างในตัวอย่างก่อนหน้า

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }