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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เมื่อใช้ Place Details 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

รูปลักษณ์ของคอมโพเนนต์ได้รับการปรับแต่งด้วยโครงสร้าง placesMaterialColor, placesMaterialFont, placesMaterialShape และ placesMaterialTheme

คุณปรับแต่งสไตล์ต่อไปนี้ได้

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

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

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

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

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

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

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

มุมมองแบบเต็ม

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

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

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

สีการระบุแหล่งที่มา

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

เรามีสีแบรนด์ 3 สีให้เลือก ซึ่งตั้งค่าแยกกันสำหรับธีมสว่างและธีมมืดได้

• ธีมสว่าง: attributionColorLight พร้อมด้วยการแจงนับสำหรับสีขาว เทา และดำ
• ธีมมืด: attributionColorDark พร้อมการแจงนับสำหรับสีขาว เทา และดำ

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

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

  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
  )

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

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

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