基本 Place Autocomplete 元件

Places UI Kit 的 Basic Place Autocomplete 元件可讓您新增個別 UI 元件，在使用者選取地點時傳回地點 ID。這個元件是全螢幕的封面，提供搜尋列供使用者輸入查詢。使用者輸入內容時，搜尋列下方會顯示自動完成結果清單。使用者輕觸地點時，系統只會將地點 ID 傳回給開發人員。這個元件可自訂。

這個元件會透過 AutocompleteFilter 結構體取得地理範圍和其他搜尋參數。

回應會提供 Place 結構體，且只會填入 placeID 欄位。

Basic Place Autocomplete 元件提供下列自訂選項：清單密度，以及是否要加入位置圖示。使用 AutocompleteUICustomization 結構體自訂元件。

您可以單獨使用基本地點自動完成元件，也可以搭配其他 Google Maps Platform API 和服務使用。

帳單

每次開啟元件並提出查詢時，系統都會向您收費。除非工作階段過期或從清單中選取地點，否則系統不會再次向你收費。

在應用程式中加入 Basic Autocomplete 元件

設定自動完成篩選器參數 (例如要傳回的類型、要限制結果的國家/地區、結果的區域座標，以及使用者起點設定時的距離資訊)，就像使用 Place Autocomplete (新版) 時一樣，但不需要 Places UI Kit。如需完整操作說明和建立自動完成篩選器的程式碼範例，請參閱Place Autocomplete (New) 說明文件。

建立自動完成篩選器後，即可使用 UI 自訂項目建立結構體。查看自訂選項和操作說明。

接著，建立啟動自訂 Basic Autocomplete 元件的按鈕。

Swift

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

查看完整範例。

自訂基本自動完成元件

清單密度

您可以選擇顯示兩行清單或多行清單。在 AutocompleteUICustomization 類別中，使用 AutocompleteListDensity (.twoLine 或 .multiLine) 中的選項。如未指定清單密度，元件會顯示兩行清單。

位置圖示

您可以選擇是否要在結果清單中顯示預設地點圖示。在 AutocompleteUICustomization 類別中使用 AutocompleteUIIcon 中的選項 (.defaultIcon 或 .noIcon)。

在基本自動完成元件中新增自訂項目

使用 AutocompleteUICustomization 類別自訂基本自動完成元件。

Swift

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

範例

重要事項：將 showWidget 的初始值設為 false，讓使用者點選按鈕時顯示自訂元件。

這個範例會建立含有按鈕的自訂基本自動完成元件。系統已選取預設圖示和雙行清單密度。自動完成篩選器已設為在拉斯維加斯及其附近地區尋找會計相關的 Place。

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