בחירת פלטפורמה: Android iOS JavaScript

רכיב בסיסי של השלמה אוטומטית למקומות

רכיב ההשלמה האוטומטית הבסיסי של המקומות בערכת כלי ה-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)
        }
      }
    }
  }