הפלטפורמה: Android iOS JavaScript

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

רכיב ההשלמה האוטומטית הבסיסי של המקומות בערכת כלי ה-UI של Places מאפשר להוסיף רכיב UI יחיד שמחזיר מזהה מקום כשמשתמש בוחר מקום. הרכיב הוא כיסוי מסך מלא שמספק סרגל חיפוש שבו המשתמשים יכולים להזין שאילתה. בזמן שהמשתמש מקליד, רשימה של תוצאות השלמה אוטומטית מוצגת מתחת לסרגל החיפוש. כשהמשתמש מקיש על מקום, מוחזר למפתח אובייקט של מקום עם מזהה המקום בלבד. אפשר להתאים אישית את הרכיב הזה.

הרכיב מקבל גבולות גיאוגרפיים ופרמטרים אחרים של חיפוש דרך המבנה AutocompleteFilter.

התשובה מספקת מבנה Place עם השדה placeID בלבד.

לרכיב 'השלמה אוטומטית בסיסית של מקומות' יש את אפשרויות ההתאמה האישית הבאות: צפיפות הרשימה והאם לכלול סמלי מיקום. כדי להתאים אישית את הרכיב, משתמשים במבנה AutocompleteUICustomization.

אפשר להשתמש ברכיב 'השלמה אוטומטית בסיסית של מקומות' באופן עצמאי או בשילוב עם שירותים וממשקי API אחרים של Google Maps Platform.

חיוב

אתם מחויבים בכל פעם שהרכיב נפתח ומתבצעת שאילתה. לא נחייב אתכם שוב על אותה הפעלה, אלא אם תוקף הפעילות יפוג או אם תבחרו מקום מהרשימה.

הוספת הרכיב Basic Autocomplete לאפליקציה

מגדירים את הפרמטרים של מסנן ההשלמה האוטומטית (לדוגמה, הסוגים להחזרה, המדינה להגבלת התוצאות, קואורדינטות האזור לתוצאות ומידע על המרחק אם המקור של המשתמש מוגדר) כמו שמגדירים את הפרמטרים של Place Autocomplete (חדש) בלי Places UI Kit. הוראות מלאות ודוגמה לקוד ליצירת מסנן השלמה אוטומטית זמינות במסמכי התיעוד בנושא השלמה אוטומטית של מקומות (חדש).

אחרי שיוצרים מסנן להשלמה אוטומטית, אפשר ליצור מבנה עם ההתאמות האישיות של ממשק המשתמש. אפשרויות והוראות להתאמה אישית

לאחר מכן, יוצרים כפתור שיפעיל את רכיב ההשלמה האוטומטית הבסיסי המותאם אישית.

Swift

  Button("Search for a place") {
    showWidget.toggle()
  }
  .basicPlaceAutocomplete(
    show: $showWidget
     // ...
  )

לדוגמה מלאה

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

התאמה אישית של תוכן

צפיפות הרשימה

אתם יכולים לבחור אם להציג רשימה עם שתי שורות או רשימה עם כמה שורות. משתמשים באפשרויות ב-AutocompleteListDensity (.twoLine או .multiLine) במחלקה AutocompleteUICustomization. אם לא מציינים את צפיפות הרשימה, הרכיב יציג רשימה של שתי שורות.

סמל המיקום

אתם יכולים לבחור אם להציג סמל ברירת מחדל של מקום ברשימת התוצאות. משתמשים באפשרויות ב-AutocompleteUIIcon (.defaultIcon או .noIcon) במחלקה AutocompleteUICustomization.

התאמה אישית של העיצוב

אתם יכולים לציין עיצוב שיבטל את כל מאפייני הסגנון שמוגדרים כברירת מחדל. אתם יכולים להתאים אישית את הצבעים, הטיפוגרפיה, המרווחים, הגבולות והפינות של רכיב פרטי המקום. ערך ברירת המחדל הוא PlacesMaterialTheme.

כל מאפייני העיצוב שלא מוגדרים מחדש משתמשים בסגנונות ברירת המחדל.

ערכת ה-UI של Places מספקת עיצוב כהה כברירת מחדל, לכן יכול להיות שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים ערכים ל-.dark ול-attribution.darkModeColor בעיצוב המותאם אישית.

מידע נוסף על עיצוב ערכות נושא זמין בקטע עיצוב בהתאמה אישית.

הוספת תוכן והתאמות אישיות של עיצוב לרכיב 'השלמה אוטומטית בסיסית'

כדי להתאים אישית את רכיב ההשלמה האוטומטית הבסיסי, משתמשים במחלקה AutocompleteUICustomization.

Swift

let uiCustomization = AutocompleteUICustomization(
    listDensity: .multiLine,
    listItemIcon: .noIcon,
    theme: PlacesMaterialTheme()
)

דוגמה

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

חשוב: כדי שהרכיב המותאם אישית יופיע כשהמשתמש לוחץ על הלחצן, צריך להגדיר את הערך ההתחלתי של showWidget כ-false.

בדוגמה הזו נוצר רכיב מותאם אישית של השלמה אוטומטית בסיסית עם לחצן. הוגדרו סמל ברירת המחדל, צפיפות הרשימה של שתי שורות ועיצוב מותאם אישית. מסנן ההשלמה האוטומטית מוגדר למצוא מקומות שקשורים לחשבונאות בלאס וגאס ובסביבתה.

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,
        theme: PlacesMaterialTheme()
      )
      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)
        }
      }
    }
  }

התאמה אישית של העיצוב

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()
    }
}