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

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

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

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

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

คอมโพเนนต์รายละเอียดสถานที่มีมุมมองแบบกะทัดรัดซึ่งสามารถแสดงในแนวนอนหรือแนวตั้ง

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

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

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

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

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

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

ตำแหน่งเริ่มต้นคือแนวตั้ง หากต้องการเลย์เอาต์แนวนอน ให้ระบุ orientation: .horizontal ใน PlaceDetailsCompactView

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

Swift

      
  // 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))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      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.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .openNowStatus()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

  

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

Swift

  // 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))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      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.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

ปรับแต่งรายละเอียดสถานที่

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

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

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

ความกว้างและความสูง

สำหรับมุมมองแนวตั้ง ความกว้างที่แนะนำคือระหว่าง 180 ถึง 300 พิกเซล สำหรับมุมมองแนวนอน ความกว้างที่แนะนำคือระหว่าง 180 ถึง 500 พิกเซล

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

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

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

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

  • ธีมสว่าง: attributionColorLight ที่มีชุดค่าผสมสำหรับสีขาว สีเทา และสีดํา
  • ธีมมืด: attributionColorDark ที่มีชุดค่าผสมสำหรับสีขาว สีเทา และสีดํา

ตัวอย่างการปรับแต่ง

ตัวอย่างนี้แสดงวิธีปรับแต่งแอตทริบิวต์สไตล์เริ่มต้น

Swift

  // 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))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var theme: PlacesMaterialTheme {
      var theme = PlacesMaterialTheme()
      theme.colorSurface = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorPrimary = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorNegative = (colorScheme == .dark ? .white : .black)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.bodySmall = .system(size: 11)
      theme.bodyMedium = .system(size: 12)
      theme.labelLarge = .system(size: 13)
      theme.headlineMedium = .system(size: 14)
      theme.attributionColorLightTheme = .black
      theme.attributionColorDarkTheme = .white
      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(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }