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

Компонент «Подробная информация о месте»

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

Разместить детали компактного компонента

Компонент «Подробная информация о месте» можно использовать как независимо, так и в сочетании с другими API и сервисами платформы Google Maps. Компонент принимает идентификатор места (Place ID) , название ресурса или координаты широты/долготы и возвращает отображаемую подробную информацию о месте .

Компонент «Подробная информация о месте» полностью настраиваемый, что позволяет изменять шрифты, цвета и радиусы скругления углов в соответствии с вашими потребностями и фирменным стилем. Вы можете настроить внешний вид подробной информации о месте, указав пользовательские значения PlacesMaterialTheme . Вы также можете настроить, какие поля подробной информации о месте будут включены, указав список элементов PlaceDetailsCompactView , каждый из которых соответствует отображаемой информации о месте.

Варианты компоновки

Компонент «Подробная информация о месте» поддерживает два основных варианта компоновки:

  • Компактный формат: макет для предварительного просмотра ключевой информации.
  • Полный вариант: Подробная схема, отображающая все доступные сведения о месте.

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

горизонтальная и вертикальная компоновка
Горизонтальная и вертикальная компоновка

Компонент «Подробная информация о месте» позволяет детально контролировать отображаемое содержимое. Каждый элемент (например, фотографии, отзывы и контактная информация) может отображаться или скрываться по отдельности, что позволяет точно настроить внешний вид компонента и плотность информации.

Разместить подробные параметры содержимого
Параметры отображения содержимого

Подробная информация о месте (компактный вид)

Компактный вид сведений о месте ( PlaceDetailsCompactView ) отображает подробную информацию о выбранном месте, занимая минимальное пространство. Это может быть полезно в информационном окне, выделяющем место на карте, в социальных сетях, например, при обмене местоположением в чате, в качестве подсказки для выбора текущего местоположения или в статье в СМИ для ссылки на место на Google Maps.

Подробная информация о месте (полный просмотр)

Полноэкранный режим отображения подробной информации о месте ( PlaceDetailsView ) предоставляет большую площадь для отображения сведений о месте и позволяет отображать больше типов информации.

Параметры отображения содержимого

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

Компактный вид Полный просмотр
  • Место для фото
  • Функция лайтбокса включена для полноэкранного увеличения фотографий.
  • Укажите адрес
  • Рейтинг и количество оценок
  • Тип места
  • Цена
  • Информация о доступном входе
  • Статус "Открыто сейчас"
  • Фотоколлаж с изображением места
  • Укажите адрес
  • Рейтинг и количество оценок
  • Тип места
  • Цена
  • Информация о доступности
  • Статус "Открыто сейчас"
  • Часы работы
  • Редакционная статья
  • Веб-сайт
  • Номер телефона
  • Отзывы отображаются на отдельной вкладке.
  • Плюс код
  • Список функций, отображаемый на отдельной вкладке.
  • Информация, специфичная для каждого типа автомобилей, например, цены на бензин на автозаправочных станциях.

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

При использовании набора инструментов для создания подробной информации о местах (Place Details UI Kit) с вас взимается плата за каждый вызов метода PlaceDetailsQuery . Если вы загружаете одно и то же место несколько раз, с вас взимается плата за каждый запрос.

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

Компонент «Подробная информация о месте» — это компонент Swift UI View. Вы можете настроить внешний вид информации о месте в соответствии со своими потребностями и дизайном вашего приложения. Подробнее о настройке можно узнать здесь .

Вы можете загрузить компонент «Подробная информация о месте» с помощью идентификатора места (Place ID), имени ресурса (source Name) или координат широты/долготы. Вы можете выбрать любой из этих методов или несколько сразу. Установите identifier в структуре PlaceDetailsQuery равным .placeID , .resourceName или .coordinate .

По умолчанию компактный вид отображается вертикально. Если вам нужна горизонтальная компоновка, укажите orientation: .horizontal в PlaceDetailsCompactView . Для большей наглядности можно также указать orientation: .vertical . Полный вид может отображаться только вертикально.

Примеры см. в разделе « Примеры компонента «Подробная информация о месте»» .

Настройте внешний вид

Индивидуальный стиль

Вы можете настроить цвета, типографику, отступы, границы и углы компонента «Подробная информация о месте».

Places UI Kit предлагает системный подход к визуальной настройке, основанный на Material Design (с некоторыми модификациями, специфичными для Google Maps). См. справочник Material Design по цвету и типографике . По умолчанию стиль соответствует визуальному языку дизайна Google Maps.

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

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

Настройка ширины и высоты

Компактные изображения

Рекомендуемая ширина:

  • Вертикальная ориентация: от 180 до 300 пикселей.
  • Горизонтальная ориентация: от 180 до 500 пикселей.

Рекомендуется не задавать высоту для компактных представлений. Это позволит содержимому окна самостоятельно определять высоту, обеспечивая отображение всей информации.

Изображения шириной менее 160 пикселей могут отображаться некорректно.

Полные изображения

Для полноэкранного отображения рекомендуемая ширина составляет от 250 до 450 пикселей. Ширина меньше 250 пикселей может отображаться некорректно.

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

Рекомендуется задавать высоту для всех элементов, отображаемых целиком. Это позволит корректно прокручивать содержимое окна.

Примеры компонентов "Подробная информация о месте"

Создайте полноэкранный режим с вертикальным расположением элементов.

Быстрый 

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Создайте компактный вид с горизонтальным расположением элементов.

Быстрый 

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details widget.
    let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
      if let place = result.place {
        print("Place: \(place.description)")
      } else {
        print("Error: \(String(describing: result.error))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Создайте полноэкранный режим с вертикальным расположением элементов.

Быстрый 

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

Настройка атрибутов стиля

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

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

Быстрый 

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  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.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

Отображение определенного контента

В этом примере создается компактное представление, отображающее только медиафайлы, адрес, рейтинг и тип, с использованием темы, созданной в предыдущем примере.

Быстрый 

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }