基本 Place Autocomplete 元件

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

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

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

基本 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)。

自訂主題

您可以指定主題來覆寫任何預設樣式屬性。您可以自訂「地點詳細資料」元件的顏色、字體、間距、邊框和圓角。預設值為 PlacesMaterialTheme。

未覆寫的主題屬性會使用預設樣式。

Places UI Kit 預設提供深色主題，因此您可能需要自訂深色和淺色主題。如要自訂深色主題，請在自訂主題中新增 .dark 和 attribution.darkModeColor 的值。

如要進一步瞭解主題，請參閱「自訂樣式」一節。

在基本自動完成元件中新增內容和主題自訂項目

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

Swift

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

範例

新增基本自動完成元件

重要事項：將 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,
        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()
    }
}