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

คุณปรับแต่งรายการการค้นหาสถานที่ได้ คุณระบุ
- เนื้อหาที่จะแสดง
- ขนาดสื่อในแนวนอน
- การตัดข้อความ
- การวางแนว
- การลบล้างธีมที่ตรงกับแบรนด์และภาษาการออกแบบของแอป
- ตำแหน่งของการระบุแหล่งที่มา
- สถานที่เลือกได้หรือไม่
นอกจากนี้ คุณยังปรับแต่งคำขอให้ดำเนินการ SearchByTextRequest
หรือ SearchNearbyRequest
ได้ด้วย
การเรียกเก็บเงิน
ระบบจะเรียกเก็บเงินจากคุณทุกครั้งที่มีการเปลี่ยนแปลงค่าการเชื่อมโยง 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
: ขนาดรูปภาพในการวางแนวตั้งของ Fragment ค่าเริ่มต้นคือ "เล็ก" ระบุไว้ในเนื้อหาpreferTruncation
: จะตัดข้อความของมุมมองรายละเอียดสถานที่แต่ละรายการหรือไม่ ค่าเริ่มต้นคือ Falsetheme
: ธีมที่กำหนดเองซึ่งรับค่ามาจาก PlacesMaterialTheme ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดธีมattributionPosition
: เลือกว่าจะแสดงการระบุแหล่งที่มาของ Google Maps ที่ด้านบนหรือด้านล่างของคอมโพเนนต์ ค่าเริ่มต้นคือ .topselectable
: ระบุว่าเลือกแต่ละสถานที่ในรายการได้หรือไม่ หากเลือกได้ ระบบจะเรียกใช้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
ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดธีมได้ที่ส่วนการจัดรูปแบบที่กำหนดเอง
UI Kit ของ Places มีธีมมืดเป็นค่าเริ่มต้น คุณจึงอาจต้องปรับแต่งทั้งธีมมืดและธีมสว่าง หากต้องการปรับแต่งธีมมืด ให้เพิ่มค่าสำหรับ .dark
และ attribution.darkModeColor
ลงในธีมที่กำหนดเอง
ตัวอย่าง
เพิ่มคอมโพเนนต์การค้นหาสถานที่
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)") } } }
ปรับแต่งธีม
UI Kit ของ Places มีธีมมืดเป็นค่าเริ่มต้น คุณจึงอาจต้องปรับแต่งทั้งธีมมืดและธีมสว่าง หากต้องการปรับแต่งธีมมืด ให้เพิ่มค่าสำหรับ .dark
และ attribution.darkModeColor
ลงในธีมที่กำหนดเอง
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() } }