เลือกแพลตฟอร์ม: Android iOS JavaScript

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

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

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

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

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

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

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

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

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

เลย์เอาต์แนวนอนและแนวตั้ง
เลย์เอาต์แนวนอนและแนวตั้ง

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

ตัวเลือกเนื้อหารายละเอียดสถานที่
ตัวเลือกการแสดงเนื้อหา

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

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

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

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

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

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

มุมมองแบบกะทัดรัด ทั้งเล่ม
  • รูปภาพสถานที่
  • แกลเลอรีสื่อแบบเต็มหน้าจอจะเปิดใช้หากมีไลต์บ็อกซ์สื่อ
  • ที่อยู่สถานที่
  • คะแนนและจำนวนคะแนน
  • ประเภทสถานที่
  • ราคา
  • ข้อมูลทางเข้าที่รองรับเก้าอี้รถเข็น
  • สถานะเปิดอยู่
  • ภาพตัดปะรูปภาพสถานที่
  • ที่อยู่สถานที่
  • คะแนนและจำนวนคะแนน
  • ประเภทสถานที่
  • ราคา
  • ข้อมูลเกี่ยวกับการช่วยเหลือพิเศษ
  • สถานะเปิดอยู่
  • เวลาเปิดทำการ
  • บทบรรณาธิการสรุป
  • เว็บไซต์
  • หมายเลขโทรศัพท์
  • รีวิวที่แสดงในแท็บเฉพาะ
  • Plus Code
  • รายการฟีเจอร์ที่แสดงในแท็บเฉพาะ
  • ไฮไลต์เฉพาะประเภท เช่น ราคาน้ำมันสำหรับปั๊มน้ำมัน
  • เวลายอดนิยม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    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
    )

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

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    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
    )

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

Swift

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: 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
  )

ปรับแต่งแอตทริบิวต์สไตล์

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

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

Swift

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

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

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

Swift

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