जगहों की जानकारी वाली यूज़र इंटरफ़ेस (यूआई) किट (प्रयोग के तौर पर उपलब्ध)

जगह की जानकारी के लिए यूज़र इंटरफ़ेस (यूआई) किट की मदद से, एक अलग यूआई कॉम्पोनेंट जोड़ा जा सकता है. यह कॉम्पोनेंट आपके ऐप्लिकेशन में जगह की जानकारी दिखाता है. यूआई किट का इस्तेमाल, Google Maps Platform के अन्य एपीआई और सेवाओं के साथ या अलग से किया जा सकता है. यूज़र इंटरफ़ेस (यूआई) किट, प्लेस आईडी या अक्षांश/देशांतर निर्देशांक में से किसी एक को लेता है और रेंडर की गई जगह की जानकारी दिखाता है.
यूज़र इंटरफ़ेस (यूआई) किट में कॉम्पैक्ट व्यू मिलता है. इसे हॉरिज़ॉन्टल या वर्टिकल तौर पर दिखाया जा सकता है. कस्टम PlaceWidgetTheme
वैल्यू देकर, जगह की जानकारी को पसंद के मुताबिक बनाया जा सकता है. जगह की जानकारी वाले कौनसे फ़ील्ड शामिल करने हैं, यह भी पसंद के मुताबिक तय किया जा सकता है. इसके लिए, PlaceDetailsCompactView
एंट्री की सूची दी जा सकती है. हर एंट्री, जगह के बारे में दिखाई गई जानकारी से जुड़ी होती है.
बिलिंग
जगह की जानकारी के लिए, जगह की जानकारी वाली यूज़र इंटरफ़ेस (यूआई) किट का इस्तेमाल करने पर, आपको विजेट का इस्तेमाल करके लोड की गई हर जगह के लिए शुल्क देना होगा. एक ही जगह को कई बार लोड करने पर, आपको हर अनुरोध के लिए बिल भेजा जाता है.
Places की यूज़र इंटरफ़ेस (यूआई) किट चालू करना
Places UI Kit का इस्तेमाल करने से पहले, आपको ये काम करने होंगे:
- बिलिंग खाते की मदद से Cloud प्रोजेक्ट बनाएं.
- अपने प्रोजेक्ट के लिए Places API चालू करें.
- एपीआई पासकोड पाएं.
जगह की जानकारी वाली यूज़र इंटरफ़ेस (यूआई) किट के उदाहरण
जगह की जानकारी वाला विजेट, Swift UI व्यू है. जगह की जानकारी के लुक और स्टाइल को अपनी ज़रूरतों के हिसाब से बनाया जा सकता है. साथ ही, इसे अपने ऐप्लिकेशन के लुक और स्टाइल से मैच किया जा सकता है.
आपके पास ओरिएंटेशन (हॉरिज़ॉन्टल या वर्टिकल), थीम बदलने, और कॉन्टेंट तय करने का विकल्प होता है. कॉन्टेंट के विकल्पों में मीडिया, पता, रेटिंग, कीमत, टाइप, ऐक्सेस करने के लिए मुख्य दरवाज़ा, मैप का लिंक, और निर्देशों का लिंक शामिल हैं. [पसंद के मुताबिक बनाने का उदाहरण देखें]().
डिफ़ॉल्ट रूप से, टेबल की पोज़िशन वर्टिकल होती है. अगर आपको हॉरिज़ॉन्टल लेआउट चाहिए, तो PlaceDetailsCompactView
में orientation: .horizontal
डालें.
इस सैंपल में, वर्टिकल लेआउट वाला कॉम्पैक्ट व्यू बनाया गया है.
// 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) }