คอมโพเนนต์ Place Autocomplete พื้นฐาน
คอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานของ Places UI Kit ช่วยให้คุณเพิ่มคอมโพเนนต์ UI แต่ละรายการที่แสดงรหัสสถานที่เมื่อผู้ใช้เลือกสถานที่ได้ คอมโพเนนต์นี้เป็นหน้าจอแบบเต็มที่แสดงแถบค้นหาเพื่อให้ผู้ใช้ป้อนคำค้นหา ขณะที่ผู้ใช้พิมพ์ ระบบจะแสดงรายการผลการค้นหาที่เติมข้อความอัตโนมัติใต้แถบค้นหา เมื่อผู้ใช้แตะสถานที่ ระบบจะแสดงออบเจ็กต์สถานที่ที่มีเฉพาะรหัสสถานที่แก่นักพัฒนาแอป คอมโพเนนต์นี้ปรับแต่งได้
คอมโพเนนต์จะใช้ขอบเขตทางภูมิศาสตร์และพารามิเตอร์การค้นหาอื่นๆ ผ่านโครงสร้าง AutocompleteFilter
การตอบกลับจะแสดงโครงสร้าง Place
ที่มีเฉพาะฟิลด์ placeID
ที่มีข้อมูล
คอมโพเนนต์การเติมข้อความอัตโนมัติของสถานที่พื้นฐานมีตัวเลือกการปรับแต่งต่อไปนี้ ความหนาแน่นของรายการ และจะรวมไอคอนตำแหน่งหรือไม่ ใช้โครงสร้าง AutocompleteUICustomization
เพื่อปรับแต่งคอมโพเนนต์
คุณสามารถใช้คอมโพเนนต์ Place Autocomplete พื้นฐานแบบแยกกันหรือใช้ร่วมกับ API และบริการอื่นๆ ของแพลตฟอร์ม Google Maps ก็ได้
การเรียกเก็บเงิน
ระบบจะเรียกเก็บเงินจากคุณทุกครั้งที่มีการเปิดคอมโพเนนต์และมีการค้นหา ระบบจะไม่เรียกเก็บเงินสำหรับเซสชันนั้นอีก เว้นแต่เซสชันจะหมดอายุหรือมีการเลือกสถานที่จากรายการ
เพิ่มคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานลงในแอป
ตั้งค่าพารามิเตอร์ตัวกรองการเติมข้อความอัตโนมัติ (เช่น ประเภทที่จะแสดง ประเทศที่จะจำกัดผลลัพธ์ พิกัดภูมิภาคสำหรับผลลัพธ์ และข้อมูลระยะทางหากตั้งค่าต้นทางของผู้ใช้) เหมือนกับที่คุณใช้การเติมข้อความอัตโนมัติของสถานที่ (ใหม่) โดยไม่มี Places UI Kit ดูวิธีการทั้งหมดและตัวอย่างโค้ดเพื่อสร้างตัวกรองการเติมข้อความอัตโนมัติได้ในเอกสารประกอบการเติมข้อความอัตโนมัติของสถานที่ (ใหม่)
เมื่อสร้างตัวกรองการเติมข้อความอัตโนมัติแล้ว คุณจะสร้างโครงสร้างที่มีการปรับแต่ง UI ได้ ดูตัวเลือกและวิธีการปรับแต่ง
จากนั้นสร้างปุ่มที่จะเปิดคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานที่ปรับแต่งแล้ว
Swift
Button("Search for a place") { showWidget.toggle() } .basicPlaceAutocomplete( show: $showWidget // ... )
ปรับแต่งคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐาน
ความหนาแน่นของรายการ
คุณเลือกได้ว่าจะแสดงรายการ 2 บรรทัดหรือรายการหลายบรรทัด ใช้ตัวเลือกใน AutocompleteListDensity
(.twoLine
หรือ .multiLine
) ในชั้นเรียน AutocompleteUICustomization
หากไม่ได้ระบุความหนาแน่นของรายการ คอมโพเนนต์จะแสดงรายการ 2 บรรทัด
ไอคอนตำแหน่ง
คุณเลือกได้ว่าจะแสดงไอคอนสถานที่เริ่มต้นในรายการผลการค้นหาหรือไม่ ใช้ตัวเลือกใน AutocompleteUIIcon
(.defaultIcon
หรือ .noIcon
) ในชั้นเรียน AutocompleteUICustomization
เพิ่มการปรับแต่งลงในคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐาน
ใช้คลาส AutocompleteUICustomization
เพื่อปรับแต่งคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐาน
Swift
let uiCustomization = AutocompleteUICustomization( listDensity: .multiLine, listItemIcon: .noIcon, )
ตัวอย่าง
ตัวอย่างนี้สร้างคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานที่กำหนดเองพร้อมปุ่ม เลือกไอคอนเริ่มต้นและความหนาแน่นของรายการ 2 บรรทัดแล้ว ระบบจะตั้งค่าตัวกรองการเติมข้อความอัตโนมัติเพื่อค้นหาสถานที่ที่เกี่ยวข้องกับการบัญชีในและใกล้กับลาสเวกัส
Swift
// Note: You must provide an API key in your app entry point first. // A demo view of the basic place autocomplete widget. public struct BasicPlaceAutocompleteView: View { @State private var fetchedPlace: Place? @State private var placesError: PlacesError? @State private var showWidget = false public var body: some View { let types: Set<PlaceType> = [.accounting] let countries: Set<String> = ["US"] let origin = CLLocation(latitude: 36.19030535579595, longitude: -115.25397680618019) let coordinateRegion = RectangularCoordinateRegion( northEast: CLLocationCoordinate2D( latitude: 36.25290087640495, longitude: -115.08025549571225), southWest: CLLocationCoordinate2D(latitude: 36.06607422287787, longitude: -115.33431432920293) ) let regionCode = "US" let inputOffset = 10 let filter = AutocompleteFilter( types: types, countries: countries, origin: origin, coordinateRegionBias: coordinateRegion, regionCode: regionCode) let uiCustomization = AutocompleteUICustomization( listDensity: .multiLine, listItemIcon: .noIcon) VStack { Button("Search for a place") { showWidget.toggle() } .basicPlaceAutocomplete( filter: filter, uiCustomization: uiCustomization ?? AutocompleteUICustomization(), show: $showWidget, onSelection: { place in guard let placeID = place.placeID else { self.placesError = .internal( "Could not fetch place details because place ID from selected suggestion not found." ) return } Task { let placesClient = await PlacesClient.shared let fetchPlaceRequest = FetchPlaceRequest( placeID: placeID, placeProperties: [.displayName, .formattedAddress] ) switch await placesClient.fetchPlace(with: fetchPlaceRequest) { case .success(let place): print("Fetched place: \(place)") self.fetchedPlace = place case .failure(let placesError): print("Failed to fetch place: \(placesError)") self.placesError = placesError } } }, onError: { placesError in self.placesError = placesError } ) if let placesError = $placesError.wrappedValue { Text(placesError.localizedDescription) .frame(maxWidth: .infinity, alignment: .leading) } else if let fetchedPlace = $fetchedPlace.wrappedValue { Text("\(fetchedPlace)") .frame(maxWidth: .infinity, alignment: .leading) } } } }