Компонент поиска мест

Компонент «Поиск мест» из набора инструментов пользовательского интерфейса Places UI Kit отображает результаты поиска мест в виде списка.

Вы можете настроить список поиска мест. Вы можете указать:

Содержимое для отображения
Размер медиафайла в вертикальной ориентации
Усечение текста
Ориентация
Переопределения темы, соответствующие вашему бренду и дизайну приложения.
Положение атрибуции
Можно ли выбрать место?

Вы также можете настроить запрос для выполнения либо запроса SearchByTextRequest , либо запроса SearchNearbyRequest .

Выставление счетов

С вас взимается плата каждый раз, когда изменяется значение привязки SearchByTextRequest() или PlaceSearchViewRequest() .

Добавьте функцию поиска мест в ваше приложение.

Добавьте виджет «Поиск места», используя PlaceSearchView class .

Быстрый

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

Чтобы ваше приложение загружало результаты текстового поиска или поиска поблизости, обновите значение параметра PlaceSearchViewRequest .

Быстрый

// use placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request

  @State private var let placeSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )

Также вы можете дополнительно получать обратные вызовы при загрузке компонента, выборе места или при возникновении ошибки при загрузке компонента.

Быстрый

.onLoad { places in
  print("places: \(places)")
}
.onRequestError { error in
  print("error: \(error)")
}
.onPlaceSelected { place in
  print("place: \(place)")
}

Настройте компонент «Поиск мест».

Настройте контент

Необходимо указать, какое содержимое будет отображать ваш компонент.

В этом примере компонент настраивается для отображения адреса и рейтинга места.

Быстрый

private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating()]
)

Вы также можете дополнительно настроить следующие аспекты контента, отображаемого в компоненте «Поиск мест»:

content : Содержимое, отображаемое в компоненте.
mediaSize : Размер фотографии в вертикальной ориентации фрагмента. По умолчанию — небольшой. Указывается в параметре content.
preferTruncation : Следует ли обрезать текст в каждом представлении сведений о месте. По умолчанию — false.
theme : Ваша пользовательская тема, наследующая от PlacesMaterialTheme. Узнайте больше о создании тем.
attributionPosition : Определяет, отображать ли ссылку на Google Maps вверху или внизу компонента. По умолчанию используется значение .top.
selectable : Определяет, можно ли выбрать каждое место в списке. Если место можно выбрать, после выбора будет вызвана замыкающая функция onPlaceSelected . Значение по умолчанию — false.

Добавьте конфигурацию ваших настроек в PlaceSearchConfiguration .

Быстрый

private let configuration = PlaceSearchConfiguration(
    content: [.address, .rating, .media(size: .large)],
    preferTruncation: true, // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom, // default is top
    selectable: true // default is false
)

Настройка ориентации

Ориентация по умолчанию — вертикальная. Вы можете указать горизонтальную ориентацию в PlaceSearchView .

Быстрый

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

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

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

Более подробную информацию о настройке тем оформления см. в разделе «Настройка стиля» .

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

Примеры

Добавьте компонент «Поиск мест».

Быстрый

struct PlaceSearchDemoView: View {
  private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating(), .type(), .media(size: .large)],
    preferTruncation: true,  // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom,  // default is top
    selectable: true  // default is false
  )
  // can also do let placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request
  @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
  var body: some View {
    PlaceSearchView(
      orientation: .horizontal,  // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
    )
    .onLoad { places in
      print("places: \(places)")
    }
    .onRequestError { error in
      print("error: \(error)")
    }
    .onPlaceSelected { place in
      print("place: \(place)")
    }
  }
}

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

Быстрый

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