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

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

Компонент Place Search из Places UI Kit отображает результаты поиска мест в виде списка.

Компонент поиска мест Places UI Kit

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

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

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

Оплата

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

Как добавить в приложение поиск мест

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

Swift

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

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

Swift

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

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

Swift

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

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

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

Вам нужно указать, какой контент будет отображаться в компоненте.

В этом примере компонент настроен так, чтобы показывать адрес и рейтинг места.

Swift

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

Вы также можете настроить следующие аспекты контента, который появляется в компоненте "Поиск мест":

  • content – контент, который показывается в компоненте.
  • mediaSize – размер фотографии при вертикальной ориентации фрагмента. По умолчанию используется маленький размер. Указано в контенте.
  • preferTruncation: нужно ли обрезать текст в каждом представлении информации о местах. По умолчанию присваивается значение false.
  • theme – ваша собственная тема, унаследованная от PlacesMaterialTheme. Подробнее о темах…
  • attributionPosition – нужно ли показывать атрибуцию Google Карт вверху или внизу компонента. Значение по умолчанию – .top.
  • selectable – можно ли выбрать каждый объект в списке. Если его можно выбрать, после выбора места будет вызван метод onPlaceSelected. По умолчанию присваивается значение false.

Добавьте конфигурацию персонализации в файл PlaceSearchConfiguration.

Swift

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.

Swift

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

Как настроить тему

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

Подробнее о собственных стилях…

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

Примеры

Как добавить компонент "Поиск мест"

Swift

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

Как настроить тему

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

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