Выберите платформу: Android iOS JavaScript

Базовый компонент автозаполнения мест

Компонент Basic Place Autocomplete из набора Places UI Kit позволяет добавить отдельный компонент пользовательского интерфейса, который возвращает идентификатор места при его выборе пользователем. Этот компонент представляет собой полноэкранную обложку с панелью поиска для ввода запроса. По мере ввода текста под панелью поиска отображается список результатов автозаполнения. При нажатии на название места разработчику возвращается объект места, содержащий только идентификатор места. Этот компонент можно настраивать.

Компонент принимает географические границы и другие параметры поиска через структуру AutocompleteFilter .

Ответ предоставляет структуру Place , в которой заполнено только поле placeID .

Компонент Basic Place Autocomplete имеет следующие параметры настройки: плотность списка и необходимость добавления значков местоположений. Для настройки компонента используйте структуру AutocompleteUICustomization .

Компонент Basic Place Autocomplete можно использовать самостоятельно или вместе с другими API и сервисами платформы Google Maps.

Биллинг

С вас будет взиматься плата за каждый раз, когда компонент открывается и выполняется запрос. Плата за этот сеанс будет списываться только после истечения срока его действия или выбора места из списка.

Добавьте компонент «Базовый автозаполнение» в свое приложение

Задайте параметры фильтра автозаполнения (например, возвращаемые типы, страну, которой нужно ограничить результаты, координаты региона для результатов и информацию о расстоянии, если задано местонахождение пользователя), как при использовании Place Autocomplete (New) без Places UI Kit. Полные инструкции и пример кода для создания фильтра автозаполнения см. в документации Place Autocomplete (New) .

После создания фильтра автозаполнения вы можете создать структуру с настройками пользовательского интерфейса. См. параметры настройки и инструкции .

Затем создайте кнопку, которая будет запускать ваш настроенный компонент базового автозаполнения.

Быстрый 

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

См. полный пример .

Настройте базовый компонент автозаполнения

Настроить контент

Плотность списка

Вы можете выбрать отображение двухстрочного или многострочного списка. Используйте параметры AutocompleteListDensity ( .twoLine или .multiLine ) класса AutocompleteUICustomization . Если плотность списка не указана, компонент отобразит двухстрочный список.

Значок местоположения

Вы можете выбрать, отображать ли значок места по умолчанию в списке результатов. Используйте параметры AutocompleteUIIcon ( .defaultIcon или .noIcon ) в классе AutocompleteUICustomization .

Настройте тему

Вы можете указать тему, которая переопределяет любые атрибуты стиля по умолчанию. Вы можете настроить цвета, оформление, интервалы, границы и углы компонента «Сведения о месте». Значение по умолчанию — PlacesMaterialTheme .

Все атрибуты темы, которые не переопределены, используют стили по умолчанию.

В Places UI Kit по умолчанию установлена ​​тёмная тема, поэтому вам может потребоваться настроить как тёмную, так и светлую. Чтобы настроить тёмную тему, добавьте значения .dark и attribution.darkModeColor в вашу пользовательскую тему .

Дополнительную информацию о темах см. в разделе «Пользовательский стиль» .

Добавьте настройки контента и темы в базовый компонент автозаполнения.

Используйте класс AutocompleteUICustomization для настройки базового компонента автозаполнения.

Быстрый 

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

Пример

Добавить базовый компонент автозаполнения

В этом примере создается настраиваемый компонент базового автозаполнения с кнопкой. Заданы значок по умолчанию, плотность списка в две строки и пользовательская тема. Фильтр автозаполнения настроен на поиск мест, связанных с бухгалтерским учетом, в Лас-Вегасе и его окрестностях.

Быстрый 

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