רכיב בסיסי של השלמה אוטומטית למקומות
רכיב ההשלמה האוטומטית הבסיסי של המקומות בערכת כלי ה-UI של Places מאפשר להוסיף רכיב UI יחיד שמחזיר מזהה מקום כשמשתמש בוחר מקום. הרכיב הוא כיסוי מסך מלא שמספק סרגל חיפוש שבו המשתמשים יכולים להזין שאילתה. בזמן שהמשתמש מקליד, רשימה של תוצאות השלמה אוטומטית מוצגת מתחת לסרגל החיפוש. כשהמשתמש מקיש על מקום, מוחזר למפתח אובייקט של מקום עם מזהה המקום בלבד. אפשר להתאים אישית את הרכיב הזה.
הרכיב מקבל גבולות גיאוגרפיים ופרמטרים אחרים של חיפוש דרך המבנה AutocompleteFilter
.
התשובה מספקת מבנה Place
עם השדה placeID
בלבד.
לרכיב 'השלמה אוטומטית בסיסית של מקומות' יש את אפשרויות ההתאמה האישית הבאות: צפיפות הרשימה והאם לכלול סמלי מיקום. כדי להתאים אישית את הרכיב, משתמשים במבנה AutocompleteUICustomization
.
אפשר להשתמש ברכיב 'השלמה אוטומטית בסיסית של מקומות' באופן עצמאי או בשילוב עם ממשקי API ושירותים אחרים של Google Maps Platform.
חיוב
החיוב מתבצע בכל פעם שהרכיב נפתח ומתבצעת שאילתה. לא תחויבו שוב על הפעילות הזו אלא אם פג תוקף הפעילות או אם בחרתם מקום מהרשימה.
הוספת רכיב ההשלמה האוטומטית הבסיסי לאפליקציה
מגדירים את הפרמטרים של מסנן ההשלמה האוטומטית (לדוגמה, הסוגים להחזרה, המדינה להגבלת התוצאות, קואורדינטות האזור לתוצאות ומידע על המרחק אם המקור של המשתמש מוגדר) כמו שמגדירים את הפרמטרים של Place Autocomplete (חדש) בלי Places UI Kit. הוראות מלאות ודוגמה לקוד ליצירת מסנן השלמה אוטומטית זמינות במסמכי התיעוד של Place Autocomplete (חדש).
אחרי שיוצרים מסנן להשלמה אוטומטית, אפשר ליצור מבנה עם ההתאמות האישיות של ממשק המשתמש. אפשרויות להתאמה אישית והוראות
לאחר מכן, יוצרים כפתור שיפעיל את רכיב ההשלמה האוטומטית הבסיסי המותאם אישית.
Swift
Button("Search for a place") { showWidget.toggle() } .basicPlaceAutocomplete( show: $showWidget // ... )
התאמה אישית של רכיב ההשלמה האוטומטית הבסיסי
צפיפות הרשימה
אפשר לבחור להציג רשימה עם שתי שורות או רשימה עם כמה שורות. משתמשים באפשרויות ב-AutocompleteListDensity
(.twoLine
או .multiLine
) במחלקה AutocompleteUICustomization
. אם לא מציינים את צפיפות הרשימה, הרכיב יציג רשימה של שתי שורות.
סמל המיקום
אתם יכולים לבחור אם להציג סמל ברירת מחדל של מקום ברשימת התוצאות. משתמשים באפשרויות ב-AutocompleteUIIcon
(.defaultIcon
או .noIcon
) במחלקה AutocompleteUICustomization
.
הוספת התאמות אישיות לרכיב 'השלמה אוטומטית בסיסית'
כדי להתאים אישית את רכיב ההשלמה האוטומטית הבסיסי, צריך להשתמש במחלקה AutocompleteUICustomization
.
Swift
let uiCustomization = AutocompleteUICustomization( listDensity: .multiLine, listItemIcon: .noIcon, )
דוגמה
בדוגמה הזו נוצר רכיב מותאם אישית של השלמה אוטומטית בסיסית עם לחצן. הסמל שמוגדר כברירת מחדל וצפיפות הרשימה של שתי שורות נבחרו. מסנן ההשלמה האוטומטית מוגדר למצוא מקומות שקשורים לחשבונאות בלאס וגאס ובסביבתה.
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) } } } }