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

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

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

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

Вы также можете настроить запрос для выполнения 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 : Размер фотографии в вертикальной ориентации фрагмента. Значение по умолчанию — small. Указывается в содержимом.
preferTruncation : обрезать ли текст в каждом представлении «Сведения о месте». Значение по умолчанию — false.
theme : Ваша собственная тема, наследующая PlacesMaterialTheme. Подробнее о темах.
attributionPosition : Отображать ли атрибуцию Google Карт вверху или внизу компонента. Значение по умолчанию — .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()
    }
}