پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

کامپوننت تکمیل خودکار مکان پایه

کامپوننت Basic Place Autocomplete از Places UI Kit به شما امکان می‌دهد یک کامپوننت UI جداگانه اضافه کنید که وقتی کاربر مکانی را انتخاب می‌کند، یک شناسه مکان را برمی‌گرداند. این کامپوننت یک پوشش تمام صفحه است که یک نوار جستجو برای کاربران فراهم می‌کند تا یک عبارت جستجو را وارد کنند. همزمان با تایپ کاربر، لیستی از نتایج تکمیل خودکار در زیر نوار جستجو نشان داده می‌شود. وقتی کاربر روی یک مکان ضربه می‌زند، یک شیء مکان با فقط شناسه مکان به توسعه‌دهنده بازگردانده می‌شود. این کامپوننت قابل تنظیم است.

این کامپوننت، مرزهای جغرافیایی و سایر پارامترهای جستجو را از طریق ساختار AutocompleteFilter دریافت می‌کند.

پاسخ، یک ساختار Place ارائه می‌دهد که فقط فیلد placeID در آن قرار دارد.

کامپوننت Basic Place Autocomplete گزینه‌های سفارشی‌سازی زیر را دارد: تراکم لیست و اینکه آیا آیکون‌های مکان را شامل شود یا خیر. از ساختار AutocompleteUICustomization برای سفارشی‌سازی کامپوننت استفاده کنید.

شما می‌توانید از کامپوننت Basic Place Autocomplete به صورت مستقل یا همراه با سایر APIها و سرویس‌های پلتفرم نقشه‌های گوگل استفاده کنید.

صورتحساب

هر بار که کامپوننت باز می‌شود و درخواستی ثبت می‌شود، هزینه‌ای از شما دریافت می‌شود. دیگر برای آن جلسه هزینه‌ای دریافت نمی‌شود، مگر اینکه آن جلسه منقضی شود یا جایی از لیست انتخاب شود.

کامپوننت Basic Autocomplete را به برنامه خود اضافه کنید

پارامترهای فیلتر تکمیل خودکار (برای مثال، انواعی که باید برگردانده شوند، کشوری که نتایج به آن محدود می‌شوند، مختصات منطقه برای نتایج و اطلاعات فاصله در صورت تنظیم مبدا کاربر) را همانطور که برای استفاده از Place Autocomplete (جدید) بدون Places UI Kit استفاده می‌کنید، تنظیم کنید. برای دستورالعمل‌های کامل و نمونه‌ای از کد ایجاد فیلتر تکمیل خودکار ، به مستندات Place Autocomplete (جدید) مراجعه کنید.

پس از ایجاد فیلتر تکمیل خودکار، می‌توانید یک ساختار با سفارشی‌سازی‌های رابط کاربری خود ایجاد کنید. به گزینه‌ها و دستورالعمل‌های سفارشی‌سازی مراجعه کنید .

سپس، دکمه‌ای ایجاد کنید که کامپوننت سفارشی‌شده‌ی تکمیل خودکار پایه‌ی شما را اجرا کند.

سویفت

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

مثال کامل را ببینید .

کامپوننت تکمیل خودکار پایه را سفارشی کنید

سفارشی سازی محتوا

تراکم فهرست

شما می‌توانید انتخاب کنید که یک لیست دو خطی یا یک لیست چند خطی نمایش داده شود. از گزینه‌های موجود در AutocompleteListDensity ( .twoLine یا .multiLine ) در کلاس AutocompleteUICustomization استفاده کنید. اگر چگالی لیست را مشخص نکنید، کامپوننت یک لیست دو خطی نمایش می‌دهد.

آیکون مکان

شما می‌توانید انتخاب کنید که آیا آیکون مکان پیش‌فرض در لیست نتایج نمایش داده شود یا خیر. از گزینه‌های موجود در AutocompleteUIIcon ( .defaultIcon یا .noIcon ) در کلاس AutocompleteUICustomization استفاده کنید.

سفارشی کردن تم

شما می‌توانید یک تم (theme) مشخص کنید که هر یک از ویژگی‌های پیش‌فرض استایل را لغو کند. می‌توانید رنگ‌ها، تایپوگرافی، فاصله‌گذاری، حاشیه‌ها و گوشه‌های کامپوننت Place Details خود را سفارشی کنید. پیش‌فرض آن PlacesMaterialTheme است.

هر ویژگی قالب که بازنویسی نشده باشد، از استایل‌های پیش‌فرض استفاده می‌کند.

کیت رابط کاربری Places به طور پیش‌فرض یک تم تیره ارائه می‌دهد، بنابراین ممکن است لازم باشد هر دو تم تیره و روشن را سفارشی کنید. برای سفارشی‌سازی تم تیره، مقادیر .dark و attribution.darkModeColor را به تم سفارشی خود اضافه کنید.

برای اطلاعات بیشتر در مورد تم‌بندی، به بخش استایل‌بندی سفارشی مراجعه کنید.

افزودن سفارشی‌سازی‌های محتوا و قالب به کامپوننت تکمیل خودکار پایه

از کلاس AutocompleteUICustomization برای سفارشی‌سازی کامپوننت Basic Autocomplete استفاده کنید.

سویفت

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

مثال

یک کامپوننت تکمیل خودکار پایه اضافه کنید

نکته مهم: برای اینکه کامپوننت سفارشی‌سازی‌شده شما هنگام کلیک کاربر روی دکمه ظاهر شود، مقدار اولیه showWidget را روی false تنظیم کنید.

این مثال یک کامپوننت تکمیل خودکار پایه سفارشی با یک دکمه ایجاد می‌کند. آیکون پیش‌فرض، تراکم لیست دو خطی و تم سفارشی تنظیم شده‌اند. فیلتر تکمیل خودکار برای یافتن مکان‌های مرتبط با حسابداری در لاس وگاس و نزدیک آن تنظیم شده است.

سویفت

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

سفارشی کردن تم

سویفت

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