پلتفرم را انتخاب کنید: Android iOS JavaScript

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

جزء Place Details در Places UI Kit به شما امکان می دهد یک مؤلفه UI جداگانه اضافه کنید که جزئیات مکان را در برنامه شما نمایش می دهد. این جزء قابل تنظیم است.

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

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

انواع چیدمان

مولفه Place Details از دو نوع چیدمان اصلی پشتیبانی می کند:

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

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

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

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

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

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

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

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

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

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

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

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

صورتحساب

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

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

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

شما می توانید انتخاب کنید که جزء جزئیات مکان با شناسه مکان، نام منبع یا مختصات طول و عرض جغرافیایی بارگیری شود. شما می توانید هر روش یا چند روش را انتخاب کنید. identifier در ساختار PlaceDetailsQuery را به .placeID ، .resourceName یا .coordinate تنظیم کنید.

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

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

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

یک ظاهر طراحی سفارشی

می‌توانید رنگ‌ها، تایپوگرافی، فاصله‌ها، حاشیه‌ها و گوشه‌های جزء جزئیات مکان خود را سفارشی کنید.

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

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

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

سفارشی سازی عرض و ارتفاع

نماهای فشرده

عرض های پیشنهادی:

• جهت عمودی: بین 180 پیکسل تا 300 پیکسل.
• جهت افقی: بین 180 پیکسل تا 500 پیکسل.

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

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

توجه: تصویر کوچک مکان برای نماهایی با عرض کمتر از 350 پیکسل ظاهر نمی شود.

نماهای کامل

برای نمایش کامل، عرض پیشنهادی بین 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 = 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
  )

ویژگی های سبک را سفارشی کنید

این نمونه نحوه سفارشی کردن ویژگی های سبک پیش فرض یک نمای کامل یا فشرده را نشان می دهد.

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