Thành phần Place Autocomplete cơ bản
Thành phần Cơ bản của tính năng Tự động hoàn thành địa điểm trong Places UI Kit cho phép bạn thêm một thành phần giao diện người dùng riêng lẻ trả về một mã địa điểm khi người dùng chọn một địa điểm. Thành phần này là một lớp phủ toàn màn hình cung cấp thanh tìm kiếm để người dùng nhập cụm từ tìm kiếm. Khi người dùng nhập nội dung, một danh sách kết quả tự động hoàn thành sẽ xuất hiện bên dưới thanh tìm kiếm. Khi người dùng nhấn vào một địa điểm, một đối tượng địa điểm chỉ có mã địa điểm sẽ được trả về cho nhà phát triển. Bạn có thể tuỳ chỉnh thành phần này.
Thành phần này lấy ranh giới địa lý và các tham số tìm kiếm khác thông qua cấu trúc AutocompleteFilter
.
Phản hồi cung cấp một cấu trúc Place
chỉ có trường placeID
được điền sẵn.
Thành phần Basic Place Autocomplete có các lựa chọn tuỳ chỉnh sau: mật độ danh sách và có bao gồm biểu tượng vị trí hay không. Sử dụng cấu trúc AutocompleteUICustomization
để tuỳ chỉnh thành phần.
Bạn có thể sử dụng thành phần Basic Place Autocomplete một cách độc lập hoặc kết hợp với các API và dịch vụ khác của Google Maps Platform.
Thanh toán
Bạn sẽ bị tính phí mỗi khi thành phần được mở và một truy vấn được thực hiện. Bạn sẽ không bị tính phí lại cho phiên đó, trừ phi phiên hết hạn hoặc bạn chọn một địa điểm trong danh sách.
Thêm thành phần Basic Autocomplete vào ứng dụng
Đặt các thông số bộ lọc tự động hoàn thành (ví dụ: các loại cần trả về, quốc gia để giới hạn kết quả, toạ độ khu vực cho kết quả và thông tin khoảng cách nếu bạn đặt nguồn gốc của người dùng) như khi bạn sử dụng tính năng Tự động hoàn thành địa điểm (Mới) mà không cần Places UI Kit. Hãy xem tài liệu về tính năng Tự động hoàn thành địa điểm (Mới) để biết hướng dẫn đầy đủ và ví dụ về mã để tạo bộ lọc tự động hoàn thành.
Sau khi tạo bộ lọc tự động hoàn thành, bạn có thể tạo một cấu trúc với các chế độ tuỳ chỉnh giao diện người dùng. Xem các lựa chọn và hướng dẫn tuỳ chỉnh.
Sau đó, hãy tạo một nút sẽ khởi chạy thành phần Cơ bản tự động hoàn thành mà bạn đã tuỳ chỉnh.
Swift
Button("Search for a place") { showWidget.toggle() } .basicPlaceAutocomplete( show: $showWidget // ... )
Tuỳ chỉnh thành phần Tự động hoàn thành cơ bản
Mật độ danh sách
Bạn có thể chọn hiển thị danh sách gồm 2 dòng hoặc danh sách nhiều dòng. Sử dụng các lựa chọn trong AutocompleteListDensity
(.twoLine
hoặc .multiLine
) trong lớp AutocompleteUICustomization
. Nếu bạn không chỉ định mật độ danh sách, thành phần sẽ hiển thị danh sách gồm 2 dòng.
Biểu tượng vị trí
Bạn có thể chọn hiển thị biểu tượng địa điểm mặc định trên danh sách kết quả hay không. Sử dụng các lựa chọn trong AutocompleteUIIcon
(.defaultIcon
hoặc .noIcon
) trong lớp AutocompleteUICustomization
.
Thêm các chế độ tuỳ chỉnh vào thành phần Tự động hoàn thành cơ bản
Sử dụng lớp AutocompleteUICustomization
để tuỳ chỉnh thành phần Tự động hoàn thành cơ bản.
Swift
let uiCustomization = AutocompleteUICustomization( listDensity: .multiLine, listItemIcon: .noIcon, )
Ví dụ:
Ví dụ này tạo một thành phần Tự động hoàn thành cơ bản tuỳ chỉnh có nút. Biểu tượng mặc định và mật độ danh sách hai dòng đã được chọn. Bộ lọc tự động hoàn thành được đặt để tìm các Địa điểm liên quan đến kế toán ở Las Vegas và vùng lân cận.
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) } } } }