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

คอมโพเนนต์การค้นหาสถานที่

คอมโพเนนต์การค้นหาสถานที่ของ Places UI Kit จะแสดงผลการค้นหาสถานที่เป็นรายการ

คอมโพเนนต์การค้นหาสถานที่ของ Places UI Kit

คุณปรับแต่งรายการการค้นหาสถานที่ได้ คุณระบุ

  • เนื้อหาที่จะแสดง
  • ขนาดสื่อในแนวนอน
  • การตัดข้อความ
  • การวางแนว
  • การลบล้างธีมที่ตรงกับแบรนด์และภาษาการออกแบบของแอป
  • ตำแหน่งของการระบุแหล่งที่มา
  • สถานที่เลือกได้หรือไม่

นอกจากนี้ คุณยังปรับแต่งคำขอให้ดำเนินการ Search by text request หรือ Search Nearby request ได้ด้วย

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

ระบบจะเรียกเก็บเงินจากคุณทุกครั้งที่มีการเปลี่ยนแปลงค่าการเชื่อมโยง SearchByTextRequest() หรือ PlaceSearchViewRequest()

เพิ่มการค้นหาสถานที่ลงในแอป

เพิ่มวิดเจ็ตการค้นหาสถานที่โดยใช้ PlaceSearchView class

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

เมื่อต้องการให้แอปโหลดผลการค้นหาข้อความหรือการค้นหาใกล้เคียง ให้อัปเดตค่า PlaceSearchViewRequest

Swift

// use placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request

  @State private var let placeSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
    

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

Swift

.onLoad { places in
  print("places: \(places)")
}
.onRequestError { error in
  print("error: \(error)")
}
.onPlaceSelected { place in
  print("place: \(place)")
}
    

ปรับแต่งคอมโพเนนต์การค้นหาสถานที่

ปรับแต่งเนื้อหา

คุณต้องระบุเนื้อหาที่คอมโพเนนต์จะแสดง

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

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating()]
)

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

  • content: เนื้อหาที่แสดงในคอมโพเนนต์
  • mediaSize: ขนาดรูปภาพในการวางแนวตั้งของส่วน ค่าเริ่มต้นคือ "เล็ก" ระบุไว้ในเนื้อหา
  • preferTruncation: จะตัดข้อความของมุมมองรายละเอียดสถานที่แต่ละรายการหรือไม่ ค่าเริ่มต้นคือ false
  • theme: ธีมที่กำหนดเองซึ่งรับค่ามาจาก PlacesMaterialTheme ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดธีม
  • attributionPosition: เลือกว่าจะแสดงการระบุแหล่งที่มาของ Google Maps ที่ด้านบนหรือด้านล่างของคอมโพเนนต์ ค่าเริ่มต้นคือ .top
  • selectable: ระบุว่าเลือกแต่ละสถานที่ในรายการได้หรือไม่ หากเลือกได้ ระบบจะเรียกใช้onPlaceSelected closure หลังจากเลือกสถานที่ ค่าเริ่มต้นคือ false

เพิ่มการกำหนดค่าการปรับแต่งลงใน PlaceSearchConfiguration

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address, .rating, .media(size: .large)],
    preferTruncation: true, // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom, // default is top
    selectable: true // default is false
)
        

ปรับแต่งการวางแนว

การวางแนวเริ่มต้นคือแนวตั้ง คุณระบุการวางแนวนอนใน PlaceSearchView ได้

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)
        

ปรับแต่งธีม

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

Swift

@Environment(\.colorScheme) var colorScheme
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()
    }
}
        

ตัวอย่าง

Swift

struct PlaceSearchDemoView: View {
  private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating(), .type(), .media(size: .large)],
    preferTruncation: true,  // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom,  // default is top
    selectable: true  // default is false
  )
  // can also do let placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request
  @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
  var body: some View {
    PlaceSearchView(
      orientation: .horizontal,  // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
    )
    .onLoad { places in
      print("places: \(places)")
    }
    .onRequestError { error in
      print("error: \(error)")
    }
    .onPlaceSelected { place in
      print("place: \(place)")
    }
  }
}