جزء اصلی تکمیل خودکار مکان از Places UI Kit به شما امکان می دهد یک مؤلفه رابط کاربری جداگانه اضافه کنید که وقتی کاربر مکانی را انتخاب می کند، شناسه مکان را برمی گرداند. کامپوننت یک پوشش تمام صفحه است که یک نوار جستجو را برای کاربران فراهم می کند تا درخواستی را وارد کنند. همانطور که کاربر تایپ می کند، لیستی از نتایج تکمیل خودکار در زیر نوار جستجو نشان داده می شود. هنگامی که کاربر روی یک مکان ضربه می زند، یک شی مکان تنها با شناسه مکان به توسعه دهنده بازگردانده می شود. این جزء قابل تنظیم است.
این مؤلفه مرزهای جغرافیایی و سایر پارامترهای جستجو را از طریق ساختار AutocompleteFilter می گیرد.
پاسخ یک ساختار Place را ارائه می دهد که فقط قسمت شناسه placeID پر شده است.
جزء اصلی تکمیل خودکار مکان دارای گزینههای سفارشیسازی زیر است: چگالی فهرست، و اینکه آیا نمادهای مکان را شامل شود یا خیر. از ساختار AutocompleteUICustomization برای سفارشی کردن کامپوننت استفاده کنید.
میتوانید از مؤلفه «تکمیل خودکار مکان پایه» بهطور مستقل یا در ارتباط با سایر APIها و سرویسهای پلتفرم Google Maps استفاده کنید.
صورتحساب
هر بار که کامپوننت باز می شود و درخواستی انجام می شود، صورتحساب دریافت می کنید. برای آن جلسه دیگر صورت حسابی از شما دریافت نمی شود مگر اینکه جلسه منقضی شود یا مکانی از لیست انتخاب شود.
کامپوننت Basic Autocomplete را به برنامه خود اضافه کنید
پارامترهای فیلتر تکمیل خودکار (به عنوان مثال، انواع برای بازگشت، کشور برای محدود کردن نتایج، مختصات منطقه برای نتایج، و اطلاعات فاصله در صورت تنظیم مبدا کاربر) را مانند استفاده از تکمیل خودکار مکان (جدید) بدون کیت UI مکانها تنظیم کنید. برای دستورالعملهای کامل و نمونهای از کد ایجاد فیلتر تکمیل خودکار،به مستندات تکمیل خودکار مکان (جدید) مراجعه کنید.
می توانید انتخاب کنید که یک لیست دو خطی یا چند خطی نمایش داده شود. از گزینه های AutocompleteListDensity ( .twoLine یا .multiLine ) در کلاس AutocompleteUICustomization استفاده کنید. اگر چگالی لیست را مشخص نکنید، مؤلفه یک لیست دو خطی نمایش می دهد.
نماد موقعیت مکانی
شما می توانید انتخاب کنید که آیا نماد مکان پیش فرض در لیست نتایج نمایش داده شود یا خیر. از گزینه های AutocompleteUIIcon ( .defaultIcon یا .noIcon ) در کلاس AutocompleteUICustomization استفاده کنید.
سفارشیسازیها را به مولفه Basic Autocomplete اضافه کنید
این مثال یک کامپوننت Basic Autocomplete سفارشی را با یک دکمه ایجاد می کند. نماد پیشفرض و چگالی فهرست دو خطی انتخاب شدهاند. فیلتر تکمیل خودکار برای یافتن مکان های مرتبط با حسابداری در لاس وگاس و نزدیک آن تنظیم شده است.
سویفت
// Note: You must provide an API key in your app entry point first.// A demo view of the basic place autocomplete widget.publicstructBasicPlaceAutocompleteView:View{@StateprivatevarfetchedPlace:Place?@StateprivatevarplacesError:PlacesError?@StateprivatevarshowWidget=falsepublicvarbody:someView{lettypes:Set<PlaceType>=[.accounting]letcountries:Set<String>=["US"]letorigin=CLLocation(latitude:36.19030535579595,longitude:-115.25397680618019)letcoordinateRegion=RectangularCoordinateRegion(northEast:CLLocationCoordinate2D(latitude:36.25290087640495,longitude:-115.08025549571225),southWest:CLLocationCoordinate2D(latitude:36.06607422287787,longitude:-115.33431432920293))letregionCode="US"letinputOffset=10letfilter=AutocompleteFilter(types:types,countries:countries,origin:origin,coordinateRegionBias:coordinateRegion,regionCode:regionCode)letuiCustomization=AutocompleteUICustomization(listDensity:.multiLine,listItemIcon:.noIcon)VStack{Button("Search for a place"){showWidget.toggle()}.basicPlaceAutocomplete(filter:filter,uiCustomization:uiCustomization??AutocompleteUICustomization(),show:$showWidget,onSelection:{placeinguardletplaceID=place.placeIDelse{self.placesError=.internal("Could not fetch place details because place ID from selected suggestion not found.")return}Task{letplacesClient=awaitPlacesClient.sharedletfetchPlaceRequest=FetchPlaceRequest(placeID:placeID,placeProperties:[.displayName,.formattedAddress])switchawaitplacesClient.fetchPlace(with:fetchPlaceRequest){case.success(letplace):print("Fetched place: \(place)")self.fetchedPlace=placecase.failure(letplacesError):print("Failed to fetch place: \(placesError)")self.placesError=placesError}}},onError:{placesErrorinself.placesError=placesError})ifletplacesError=$placesError.wrappedValue{Text(placesError.localizedDescription).frame(maxWidth:.infinity,alignment:.leading)}elseifletfetchedPlace=$fetchedPlace.wrappedValue{Text("\(fetchedPlace)").frame(maxWidth:.infinity,alignment:.leading)}}}}
تاریخ آخرین بهروزرسانی 2025-09-04 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2025-09-04 بهوقت ساعت هماهنگ جهانی."],[],[],null,["Select platform: [Android](/maps/documentation/places/android-sdk/basic-place-autocomplete-ui-kit \"View this page for the Android platform docs.\") [iOS](/maps/documentation/places/ios-sdk/basic-place-autocomplete-ui-kit \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/places-ui-kit/basic-autocomplete \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\nBasic Place Autocomplete component\n==================================\n\n\nThe Basic Place Autocomplete component of the Places UI Kit lets you add an individual UI component that returns a [place ID](/maps/documentation/places/ios-sdk/place-id) when a user selects a place. The component is a full screen cover that provides a search bar for users to enter a query. As the user types, a list of autocomplete results will be shown below the search bar. When the user taps on a place, a place object with only place ID is returned to the developer. This component is customizable.\n\n\nThe component takes geographic bounds and other search parameters through the [`AutocompleteFilter`](/maps/documentation/places/ios-sdk/reference/swift/Structs/AutocompleteFilter) struct.\n\n\nThe response provides a [`Place`](/maps/documentation/places/ios-sdk/reference/swift/Structs/Place) struct with only the `placeID` field populated.\n\n\nThe Basic Place Autocomplete component has the following customization options: list density, and whether to include location icons. Use the [`AutocompleteUICustomization`](https://developers.google.com/maps/documentation/places/ios-sdk/reference/swift/Structs/AutocompleteUICustomization) struct to customize the component.\n\n\nYou can use the Basic Place Autocomplete component independently or in conjunction with other Google Maps Platform APIs and services.\n\nBilling\n-------\n\n\nYou are billed each time the component is opened and a query is made. You won't be billed again for that session unless the session expires or a place is selected from the list.\n\nAdd the Basic Autocomplete component to your app\n------------------------------------------------\n\n\nSet the autocomplete filter parameters (for example, the types to return, the country to limit results to, the region coordinates for results, and distance information if the users origin is set) as you would to use Place Autocomplete (New) without the Places UI Kit. See [the Place Autocomplete (New) documentation](/maps/documentation/places/ios-sdk/place-autocomplete) for full instructions and [an example of the code to create an autocomplete filter](/maps/documentation/places/ios-sdk/place-autocomplete#optional-parameters).\n\n\nOnce you've created your autocomplete filter, you can create a struct with your UI customizations. [See customization options and instructions](/maps/documentation/places/ios-sdk/basic-place-autocomplete#customize-the-basic-autocomplete-component).\n\n\nThen, create a button that will launch your customized Basic Autocomplete component. \n\n### Swift\n\n```swift\n Button(\"Search for a place\") {\n showWidget.toggle()\n }\n .basicPlaceAutocomplete(\n show: $showWidget\n // ...\n )\n```\n\n\n[See the full example](/maps/documentation/places/ios-sdk/basic-place-autocomplete-ui-kit#example).\n\nCustomize the Basic Autocomplete component\n------------------------------------------\n\n### List density\n\n\nYou can choose to either display a two-line list or a multiline list. Use the options in `AutocompleteListDensity` (`.twoLine` or `.multiLine`) in the [`AutocompleteUICustomization`](/maps/documentation/places/ios-sdk/reference/swift/Structs/AutocompleteUICustomization) class. If you don't specify the list density, the component will display a two-line list.\n\n### Location icon\n\n\nYou can choose whether to display a default place icon on the results list. Use the options in `AutocompleteUIIcon` (`.defaultIcon` or `.noIcon`) in the [`AutocompleteUICustomization`](/maps/documentation/places/ios-sdk/reference/swift/Structs/AutocompleteUICustomization) class.\n\n### Add customizations to the Basic Autocomplete component\n\n\nUse the [`AutocompleteUICustomization`](/maps/documentation/places/ios-sdk/reference/swift/Structs/AutocompleteUICustomization) class to customize the Basic Autocomplete component. \n\n### Swift\n\n```swift\nlet uiCustomization = AutocompleteUICustomization(\n listDensity: .multiLine,\n listItemIcon: .noIcon,\n)\n```\n\nExample\n-------\n\n| **Important:** Set the initial value of `showWidget` to false in order to have your customized component appear when the user clicks the button.\n\n\nThis example creates a custom Basic Autocomplete component with a button. The default icon and two-line list density have been selected. The autocomplete filter is set to find accounting-related Places in and near Las Vegas. \n\n### Swift\n\n```swift\n // Note: You must provide an API key in your app entry point first.\n // A demo view of the basic place autocomplete widget.\n public struct BasicPlaceAutocompleteView: View {\n @State private var fetchedPlace: Place?\n @State private var placesError: PlacesError?\n @State private var showWidget = false\n public var body: some View {\n let types: Set\u003cPlaceType\u003e = [.accounting]\n let countries: Set\u003cString\u003e = [\"US\"]\n let origin = CLLocation(latitude: 36.19030535579595, longitude: -115.25397680618019)\n let coordinateRegion = RectangularCoordinateRegion(\n northEast: CLLocationCoordinate2D(\n latitude: 36.25290087640495, longitude: -115.08025549571225),\n southWest: CLLocationCoordinate2D(latitude: 36.06607422287787, longitude: -115.33431432920293)\n )\n let regionCode = \"US\"\n let inputOffset = 10\n let filter = AutocompleteFilter(\n types: types,\n countries: countries,\n origin: origin,\n coordinateRegionBias: coordinateRegion,\n regionCode: regionCode)\n let uiCustomization = AutocompleteUICustomization(\n listDensity: .multiLine,\n listItemIcon: .noIcon)\n VStack {\n Button(\"Search for a place\") {\n showWidget.toggle()\n }\n .basicPlaceAutocomplete(\n filter: filter,\n uiCustomization: uiCustomization ?? AutocompleteUICustomization(),\n show: $showWidget,\n onSelection: { place in\n guard let placeID = place.placeID else {\n self.placesError = .internal(\n \"Could not fetch place details because place ID from selected suggestion not found.\"\n )\n return\n }\n Task {\n let placesClient = await PlacesClient.shared\n let fetchPlaceRequest = FetchPlaceRequest(\n placeID: placeID,\n placeProperties: [.displayName, .formattedAddress]\n )\n switch await placesClient.fetchPlace(with: fetchPlaceRequest) {\n case .success(let place):\n print(\"Fetched place: \\(place)\")\n self.fetchedPlace = place\n case .failure(let placesError):\n print(\"Failed to fetch place: \\(placesError)\")\n self.placesError = placesError\n }\n }\n },\n onError: { placesError in\n self.placesError = placesError\n }\n )\n if let placesError = $placesError.wrappedValue {\n Text(placesError.localizedDescription)\n .frame(maxWidth: .infinity, alignment: .leading)\n } else if let fetchedPlace = $fetchedPlace.wrappedValue {\n Text(\"\\(fetchedPlace)\")\n .frame(maxWidth: .infinity, alignment: .leading)\n }\n }\n }\n }\n```"]]