کیت رابط کاربری جزئیات مکانها (تجربی)

کیت UI جزئیات مکان برای جزئیات مکان به شما امکان می دهد یک مؤلفه رابط کاربری جداگانه اضافه کنید که جزئیات مکان را در برنامه شما نمایش می دهد. کیت UI را می توان به طور مستقل یا همراه با سایر APIها و سرویس های پلتفرم Google Maps استفاده کرد. کیت UI یا شناسه مکان یا مختصات طول و عرض جغرافیایی را می گیرد و اطلاعات جزئیات مکان ارائه شده را برمی گرداند.
کیت UI یک نمای فشرده ارائه می دهد که می تواند به صورت افقی یا عمودی نمایش داده شود. می توانید ظاهر جزئیات مکان را با ارائه مقادیر سفارشی PlaceWidgetTheme
شخصی سازی کنید. همچنین میتوانید با تعیین فهرستی از ورودیهای PlaceDetailsCompactView
، که هر کدام مربوط به بخشی از اطلاعات نشاندادهشده درباره مکان است، فیلدهای جزئیات مکان را سفارشی کنید.
صورتحساب
هنگام استفاده از کیت UI جزئیات مکان برای جزئیات مکان، برای هر مکانی که با استفاده از ویجت بارگیری می شود صورتحساب دریافت می کنید. اگر یک مکان را چندین بار بارگیری کنید، برای هر درخواست صورتحساب دریافت می کنید.
Places UI Kit را فعال کنید
قبل از استفاده از Places UI Kit، باید:
- یک پروژه Cloud با یک حساب صورتحساب ایجاد کنید.
- Places API را برای پروژه خود فعال کنید .
- یک کلید API دریافت کنید .
نمونههای کیت UI جزئیات مکان
ویجت Place Details یک نمای Swift UI است. می توانید ظاهر و احساس اطلاعات جزئیات مکان را مطابق با نیازهای خود و مطابقت با ظاهر برنامه خود سفارشی کنید.
می توانید جهت (افقی یا عمودی)، لغو تم و محتوا را مشخص کنید. گزینه های محتوا عبارتند از رسانه، آدرس، رتبه بندی، قیمت، نوع، ورودی قابل دسترسی، پیوند نقشه ها و پیوند مسیرها. [نمونه سفارشی سازی را ببینید]().
موقعیت پیش فرض عمودی است. اگر می خواهید یک طرح افقی داشته باشید، 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: PlaceWidgetTheme { if customTheme { var theme = PlaceWidgetTheme() theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray) theme.colorOutlineDecorative = (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.colorPrimary = (colorScheme == .dark ? .yellow : .purple) theme.colorInfo = (colorScheme == .dark ? .yellow : .purple) theme.cornerRadius = 10 theme.labelLarge = .system(size: 15) theme.headlineMedium = .system(size: 14) theme.bodyLarge = .system(size: 13) theme.bodyMedium = .system(size: 12) theme.bodySmall = .system(size: 11) theme.attributionColorLight = .black theme.attributionColorDark = .white return theme } else { return PlaceWidgetTheme() } } @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) }
این نمونه یک نمای فشرده با طرح افقی ایجاد می کند.
// 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: PlaceWidgetTheme { if customTheme { var theme = PlaceWidgetTheme() theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray) theme.colorOutlineDecorative = (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.colorPrimary = (colorScheme == .dark ? .yellow : .purple) theme.colorInfo = (colorScheme == .dark ? .yellow : .purple) theme.cornerRadius = 10 theme.labelLarge = .system(size: 15) theme.headlineMedium = .system(size: 14) theme.bodyLarge = .system(size: 13) theme.bodyMedium = .system(size: 12) theme.bodySmall = .system(size: 11) theme.attributionColorLight = .black theme.attributionColorDark = .white return theme } else { return PlaceWidgetTheme() } } @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) }
نمونه سفارشی سازی
این نمونه نحوه سفارشی کردن ویژگی های سبک پیش فرض را نشان می دهد.
// 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: PlaceWidgetTheme { var theme = PlaceWidgetTheme() theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray) theme.colorOutlineDecorative = (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.colorPrimary = (colorScheme == .dark ? .yellow : .purple) theme.colorInfo = (colorScheme == .dark ? .yellow : .purple) theme.cornerRadius = 10 theme.labelLarge = .system(size: 15) theme.headlineMedium = .system(size: 14) theme.bodyLarge = .system(size: 13) theme.bodyMedium = .system(size: 12) theme.bodySmall = .system(size: 11) theme.attributionColorLight = .black theme.attributionColorDark = .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) }