Компонент «Сведения о месте»

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

Компонент «Сведения о месте» можно использовать независимо или совместно с другими API и сервисами платформы Google Карт. Компонент принимает идентификатор места , имя ресурса или координаты широты/долготы и возвращает визуализированную информацию о месте .

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

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

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

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

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

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

Компактный вид сведений о месте

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

Подробности места полный просмотр

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

Варианты отображения контента

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

Биллинг

При использовании Place Details UI Kit плата взимается за каждый вызов метода PlaceDetailsQuery . При загрузке одного и того же места несколько раз плата взимается за каждый запрос.

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

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

Вы можете загрузить компонент «Сведения о месте» с идентификатором места, именем ресурса или координатами широты/долготы. Можно выбрать любой или несколько методов. В структуре PlaceDetailsQuery identifier должен иметь значение .placeID , .resourceName или .coordinate .

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

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

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

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

Внешний вид компонента настраивается с помощью структур placesMaterialColor , placesMaterialFont , placesMaterialShape и placesMaterialTheme .

Вы можете настроить следующие стили:

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

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

Компактные виды

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

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

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

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

Полные просмотры

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

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

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

Цвета атрибуции

Условия использования Google Карт требуют использовать один из трёх фирменных цветов для указания авторства Google Карт. Это указание должно быть видимым и доступным после внесения изменений в настройки.

Мы предлагаем на выбор 3 фирменных цвета, которые можно независимо настраивать для светлой и темной темы:

• Светлая тема: attributionColorLight с перечислениями для белого, серого и черного цветов.
• Темная тема: attributionColorDark с перечислениями для белого, серого и черного цветов.

Примеры компонентов «Сведения о месте»

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

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = 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 = 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 = 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
  )

Настройте атрибуты стиля

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

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