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

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

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

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

Компонент «Сведения о месте» предлагает компактное представление, которое может отображаться горизонтально или вертикально.

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

Биллинг

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

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

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

Вы можете указать ориентацию (горизонтальную или вертикальную), переопределения темы и содержимое. Параметры содержимого: медиа, адрес, рейтинг, цена, тип, доступный вход, ссылка на карты и ссылка на маршрут. Узнайте больше о настройке .

Положение по умолчанию — вертикальное. Если вы хотите горизонтальную компоновку, укажите orientation: .horizontal в PlaceDetailsCompactView .

В этом примере создается компактное представление с вертикальной компоновкой.

Быстрый

      
  // 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))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  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()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .openNowStatus()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

  

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

Быстрый

  // 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))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  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()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

Настройте детали места

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

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

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

Ширина и высота

Для вертикальных видов рекомендуемая ширина составляет от 180 до 300 пикселей. Для горизонтальных видов рекомендуемая ширина составляет от 180 до 500 пикселей.

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

Примечание: миниатюра изображения места не будет отображаться для видов шириной менее 350 пикселей.

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

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

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

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

Пример настройки

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

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

Быстрый

  // 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))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var theme: PlacesMaterialTheme {
      var theme = PlacesMaterialTheme()
      theme.colorSurface = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorPrimary = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorNegative = (colorScheme == .dark ? .white : .black)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.bodySmall = .system(size: 11)
      theme.bodyMedium = .system(size: 12)
      theme.labelLarge = .system(size: 13)
      theme.headlineMedium = .system(size: 14)
      theme.attributionColorLightTheme = .black
      theme.attributionColorDarkTheme = .white
      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(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }