پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

کامپوننت جزئیات مکان

کامپوننت جزئیات مکان از کیت رابط کاربری مکان‌ها به شما امکان می‌دهد یک کامپوننت رابط کاربری جداگانه اضافه کنید که جزئیات مکان را در برنامه شما نمایش می‌دهد. این کامپوننت قابل تنظیم است.

جزئیات را در کامپوننت فشرده قرار دهید

کامپوننت جزئیات مکان می‌تواند به صورت مستقل یا همراه با سایر APIها و سرویس‌های پلتفرم نقشه‌های گوگل مورد استفاده قرار گیرد. این کامپوننت یا یک شناسه مکان ، نام منبع یا مختصات طول و عرض جغرافیایی را دریافت کرده و اطلاعات جزئیات مکان رندر شده را برمی‌گرداند.

کامپوننت جزئیات مکان (Place Details) کاملاً قابلیت تم‌بندی دارد و به شما امکان می‌دهد فونت‌ها، رنگ‌ها و شعاع گوشه‌ها را متناسب با مورد استفاده و دستورالعمل‌های بصری برند خود سفارشی کنید. می‌توانید ظاهر جزئیات مکان را با ارائه مقادیر سفارشی PlacesMaterialTheme سفارشی کنید. همچنین می‌توانید با مشخص کردن لیستی از ورودی‌های PlaceDetailsCompactView که هر کدام مربوط به بخشی از اطلاعات نشان داده شده در مورد مکان هستند، فیلدهای جزئیات مکان را سفارشی کنید.

انواع طرح بندی

کامپوننت جزئیات مکان از دو نوع طرح‌بندی اصلی پشتیبانی می‌کند:

  • فشرده: طرحی برای پیش‌نمایش اطلاعات کلیدی.
  • کامل: یک طرح جامع که تمام جزئیات مکان موجود را نمایش می‌دهد.

طرح‌بندی فشرده می‌تواند در جهت عمودی یا افقی نمایش داده شود. این به شما امکان می‌دهد تا کامپوننت را در طرح‌بندی‌های مختلف و اندازه‌های صفحه نمایش ادغام کنید. طرح‌بندی کامل فقط می‌تواند به صورت عمودی نمایش داده شود.

طرح بندی افقی و عمودی
طرح بندی افقی و عمودی

کامپوننت جزئیات مکان به شما امکان کنترل دقیق بر محتوای نمایش داده شده در کامپوننت را می‌دهد. هر عنصر (مانند عکس‌ها، نظرات و اطلاعات تماس) می‌تواند به صورت جداگانه نمایش داده شود یا پنهان شود و امکان سفارشی‌سازی دقیق ظاهر کامپوننت‌ها و تراکم اطلاعات را فراهم کند.

گزینه‌های محتوای جزئیات مکان
گزینه‌های نمایش محتوا

نمای فشرده جزئیات مکان

نمای فشرده جزئیات مکان ( PlaceDetailsCompactView ) جزئیات یک مکان انتخاب شده را با استفاده از حداقل فضا نمایش می‌دهد. این ویژگی می‌تواند در یک پنجره اطلاعات که مکانی را روی نقشه برجسته می‌کند، در یک تجربه رسانه‌های اجتماعی مانند به اشتراک گذاشتن یک مکان در یک چت، به عنوان پیشنهادی برای انتخاب مکان فعلی شما یا در یک مقاله رسانه‌ای برای ارجاع به مکان در نقشه‌های گوگل مفید باشد.

جزئیات مکان نمای کامل

نمای کامل جزئیات مکان ( PlaceDetailsView ) سطح بزرگتری را برای نمایش اطلاعات جزئیات مکان ارائه می‌دهد و به شما امکان می‌دهد انواع بیشتری از اطلاعات را نمایش دهید.

گزینه‌های نمایش محتوا

شما می‌توانید با استفاده از enumها در PlaceDetailsCompactContent یا PlaceDetailsContent مشخص کنید که کدام محتوا نمایش داده شود.

نمای فشرده نمای کامل
  • عکس مکان
  • قابلیت نمایش عکس در حالت لایت باکس (Lightbox) برای بزرگنمایی تمام صفحه
  • آدرس محل
  • رتبه‌بندی و تعداد رتبه‌بندی
  • نوع مکان
  • قیمت
  • اطلاعات ورودی قابل دسترسی
  • وضعیت اکنون باز است
  • کولاژ عکس را قرار دهید
  • آدرس محل
  • رتبه‌بندی و تعداد رتبه‌بندی
  • نوع مکان
  • قیمت
  • اطلاعات دسترسی
  • وضعیت اکنون باز است
  • ساعات کاری
  • خلاصه سرمقاله
  • وب‌سایت
  • شماره تلفن
  • نقد و بررسی‌ها در تب اختصاصی ارائه شده‌اند
  • کد پلاس
  • فهرست ویژگی‌ها، در یک تب اختصاصی رندر شده است
  • نکات برجسته مربوط به نوع خاص، مانند قیمت بنزین برای پمپ بنزین‌ها

صورتحساب

هنگام استفاده از Place Details UI Kit، برای هر بار فراخوانی متد PlaceDetailsQuery هزینه دریافت می‌شود. اگر یک مکان را چندین بار بارگذاری کنید، برای هر درخواست هزینه دریافت می‌شود.

جزئیات مکان را به برنامه خود اضافه کنید

کامپوننت جزئیات مکان یک نمای رابط کاربری Swift است. می‌توانید ظاهر و حس اطلاعات جزئیات مکان را متناسب با نیازهای خود و با ظاهر برنامه خود تنظیم کنید. درباره سفارشی‌سازی بیشتر بدانید .

شما می‌توانید کامپوننت Place Details را با یک Place ID، یک نام منبع یا مختصات طول و عرض جغرافیایی بارگذاری کنید. می‌توانید هر متد یا چندین متد را انتخاب کنید. identifier در ساختار PlaceDetailsQuery روی .placeID ، .resourceName یا .coordinate تنظیم کنید.

موقعیت پیش‌فرض برای نمای فشرده عمودی است. اگر می‌خواهید طرح‌بندی افقی باشد، در PlaceDetailsCompactView ، orientation: .horizontal را مشخص کنید. همچنین می‌توانید برای وضوح بیشتر orientation: .vertical نیز مشخص کنید. نمای کامل فقط می‌تواند به صورت عمودی نمایش داده شود.

مثال‌ها را در بخش مثال‌های کامپوننت جزئیات مکان ببینید.

ظاهر بصری را سفارشی کنید

استایل سفارشی

شما می‌توانید رنگ‌ها، تایپوگرافی، فاصله‌گذاری، حاشیه‌ها و گوشه‌های کامپوننت Place Details خود را سفارشی کنید.

کیت رابط کاربری Places یک رویکرد سیستم طراحی برای سفارشی‌سازی بصری ارائه می‌دهد که تقریباً مبتنی بر طراحی متریال (با برخی اصلاحات خاص Google-Maps) است. برای رنگ و تایپوگرافی به مرجع طراحی متریال مراجعه کنید. به طور پیش‌فرض، این سبک به زبان طراحی بصری Google Maps پایبند است.

کیت رابط کاربری Places به طور پیش‌فرض یک تم تیره ارائه می‌دهد، بنابراین ممکن است لازم باشد هر دو تم تیره و روشن را سفارشی کنید. برای سفارشی‌سازی تم تیره، مقادیر .dark و attribution.darkModeColor را به تم سفارشی خود اضافه کنید.

برای اطلاعات بیشتر در مورد استایل‌بندی، به بخش استایل‌بندی سفارشی مراجعه کنید.

قابلیت سفارشی‌سازی عرض و ارتفاع

نماهای فشرده

عرض‌های توصیه‌شده:

  • جهت عمودی: بین ۱۸۰ پیکسل و ۳۰۰ پیکسل.
  • جهت افقی: بین ۱۸۰ پیکسل و ۵۰۰ پیکسل.

بهترین روش این است که برای نماهای فشرده، ارتفاع تعیین نکنید. این کار به محتوای پنجره اجازه می‌دهد تا ارتفاع را تنظیم کند و تمام اطلاعات نمایش داده شود.

عرض‌های کوچکتر از ۱۶۰ پیکسل ممکن است به درستی نمایش داده نشوند.

نماهای کامل

برای نمایش کامل، عرض توصیه شده بین ۲۵۰ پیکسل تا ۴۵۰ پیکسل است. عرض کمتر از ۲۵۰ پیکسل ممکن است به درستی نمایش داده نشود.

می‌توانید ارتفاع کامپوننت را تنظیم کنید: نمای عمودی جزئیات مکان (Place Details) به صورت عمودی در فضای اختصاص داده شده پیمایش می‌شود.

بهترین روش این است که برای نمایش کامل، ارتفاع را تنظیم کنید. این کار به محتوای پنجره اجازه می‌دهد تا به درستی پیمایش شود.

نمونه‌های کامپوننت جزئیات مکان

ایجاد نمای کامل با طرح عمودی

سویفت 

  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 به طور پیش‌فرض یک تم تیره ارائه می‌دهد، بنابراین ممکن است لازم باشد هر دو تم تیره و روشن را سفارشی کنید. برای سفارشی‌سازی تم تیره، مقادیر .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)
  }