अपने ऐप्लिकेशन में 3D मैप जोड़ना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

यह प्रॉडक्ट या सुविधा, एक्सपेरिमेंट के तौर पर उपलब्ध है (pre-GA). Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं के लिए, आपको सीमित सहायता मिल सकती है. साथ ही, ऐसा हो सकता है कि Pre-GA के तहत आने वाले प्रॉडक्ट और सुविधाओं में किए गए बदलाव, Pre-GA के अन्य वर्शन के साथ काम न करें. Pre-GA Offerings पर, Google Maps Platform की सेवा से जुड़ी शर्तें लागू होती हैं. ज़्यादा जानकारी के लिए, लॉन्च के चरणों की जानकारी पढ़ें.

इस पेज पर, iOS के लिए Maps 3D SDK का इस्तेमाल करके, iOS ऐप्लिकेशन में सामान्य 3D मैप जोड़ने का तरीका बताया गया है. इस पेज पर दिए गए निर्देशों का पालन करने के लिए ज़रूरी है कि आपने सेटअप पेज पर दिए गए चरणों को पहले ही पूरा कर लिया हो. साथ ही, आपके पास ये चीज़ें हों:

• Maps 3D SDK for iOS की सुविधा वाला Google Cloud प्रोजेक्ट
• iOS के लिए Maps 3D SDK टूल का एपीआई पासकोड
• Maps 3D SDK for iOS पैकेज के साथ Xcode का वर्शन 16.0 या इसके बाद का वर्शन.

इन ज़रूरी शर्तों के बारे में ज़्यादा जानने के लिए, सेटअप देखें.

ज़्यादा बेहतर कोडलैब का इस्तेमाल करें.

GitHub पर कोड के ज़्यादा सैंपल देखें.

पहला भाग: एक बेसिक SwiftUI ऐप्लिकेशन बनाना

1. Xcode में नया ऐप्लिकेशन बनाएं.
2. अपने प्रॉडक्ट का नाम एट्रिब्यूट की वैल्यू Hello3DWorld पर सेट करें. साथ ही, संगठन का आइडेंटिफ़ायर एट्रिब्यूट की वैल्यू com.example पर सेट करें. पैकेज का नाम com.example.Hello3DWorld होना चाहिए.
3. SwiftUI इंटरफ़ेस चुनें.
4. अपने ऐप्लिकेशन में Maps 3D लाइब्रेरी जोड़ें. सेटअप सेक्शन में दिए गए निर्देश देखें.

दूसरा हिस्सा: मैप जोड़ना

1. ContentView.swift नाम की फ़ाइल खोलें. यह आपके ऐप्लिकेशन का एंट्री पॉइंट और मुख्य नेविगेशन है.

2. SwiftUI और GoogleMaps3D पैकेज इंपोर्ट करें.

3. बॉडी डिक्लेरेशन के अंदर मौजूद पूरे कोड को Map(mode: .hybrid) से बदलें.

   Map को शुरू करने के लिए, आपको कम से कम यह शुरुआती कॉन्फ़िगरेशन देना होगा: MapMode:

   • .hybrid या
   • .satellite

   आपकी ContentView.swift फ़ाइल ऐसी दिखनी चाहिए:

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   
   #Preview {
     ContentView()
   }
   

तीसरा हिस्सा: एपीआई पासकोड सेट करें.

1. मैप शुरू होने से पहले, एपीआई कुंजी सेट की जानी चाहिए. इसके लिए, मैप वाले View के init() इवेंट हैंडलर में Map.apiKey सेट करें.

   चेतावनी: एपीआई पासकोड को बाहरी या सार्वजनिक सोर्स कंट्रोल में न डालें

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
   
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   

चौथा हिस्सा: मैप व्यू को कंट्रोल करने के लिए कैमरे का इस्तेमाल करना

3D मैप व्यू को Camera क्लास से कंट्रोल किया जाता है. इस चरण में, आपको मैप व्यू को पसंद के मुताबिक बनाने के लिए, जगह, ऊंचाई, हेडिंग, झुकाव, रोल, और रेंज तय करने का तरीका बताया जाएगा.

1. Map() फ़ंक्शन कॉल में बदलाव करके, initialCamera प्रॉपर्टी शामिल करें. मैनहैटन के मुख्य इलाके का व्यू दिखाने के लिए, initialCamera को शुरू करें.

   ध्यान दें: पैरामीटर का क्रम मायने रखता है. कैमरे को चालू करने के लिए, सबसे पहले अक्षांश और फिर देशांतर की जानकारी दी जाती है. पक्का करें कि आपने हर वैल्यू सही तरीके से डाली हो. खास तौर पर, जब किसी दूसरे सोर्स से वैल्यू चिपकाई जा रही हो. ऐसा न करने पर, कैमरा किसी ऐसी जगह की जानकारी दिखा सकता है जिसके बारे में आपने नहीं सोचा था.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
     var body: some View {
       Map(initialCamera: .init(
         latitude: 40.748339,
         longitude: -73.985912,
         altitude: 211.1,
         heading: 52,
         tilt: 68,
         range: 1039
       ), mode: .hybrid)
     }
   }
   

ऊपर दिए गए कोड में, इन पैरामीटर के लिए वैल्यू सेट की गई हैं:

• heading: उत्तर से डिग्री में बियरिंग, ताकि कैमरे को उस दिशा में घुमाया जा सके.
• tilt: झुकाव का कोण डिग्री में होता है. इसमें 0 का मतलब है कि कैमरा सीधे ऊपर की ओर है और 90 का मतलब है कि कैमरा क्षैतिज रूप से देख रहा है.
• roll: कैमरे के वर्टिकल प्लेन के चारों ओर रोल का कोण, डिग्री में.
• range: अक्षांश और देशांतर की जगह से कैमरे की दूरी, मीटर में
• altitude: समुद्र तल से कैमरे की ऊंचाई.

अगर इनमें से कोई भी अतिरिक्त पैरामीटर नहीं दिया जाता है, तो डिफ़ॉल्ट वैल्यू का इस्तेमाल किया जाएगा.

ध्यान दें: कैमरे की ऊंचाई एक तय वैल्यू होती है. जिन इलाकों में ज़मीन का लेवल, समुद्र तल से काफ़ी ऊपर होता है वहां ज़मीन के लेवल से कम ऊंचाई सेट करने पर, अजीब विज़ुअल इफ़ेक्ट दिख सकते हैं.

ध्यान दें: कैमरे के झुकाव और रेंज का इस्तेमाल करके भी, कैमरे की ऊंचाई को अडजस्ट किया जा सकता है.

कैमरे के व्यू में ज़्यादा 3D डेटा दिखाने के लिए, शुरुआती पैरामीटर सेट करें. इससे, झुका हुआ व्यू ज़्यादा करीब से दिखेगा.

छठा भाग: अपने ऐप्लिकेशन की झलक देखना और उसे चलाना

1. Xcode Preview जोड़ना

   प्रीव्यू, XCode की एक अहम सुविधा है. इसकी मदद से, सिम्युलेटर या किसी बाहरी डिवाइस का इस्तेमाल किए बिना ही, अपने ऐप्लिकेशन को देखा जा सकता है और उसके साथ इंटरैक्ट किया जा सकता है.

   झलक जोड़ने के लिए, अपने स्ट्रक्चर के बाहर #Preview {} कोड ब्लॉक जोड़ें.

   #Preview {
     CameraDemo()
   }
   

2. ऐप्लिकेशन चलाएं

ऐप्लिकेशन बनाएं और उसे चलाएं.

बधाई हो!

आपने किसी ऐप्लिकेशन में 3D मैप जोड़ लिया है!

इसके बाद, iOS के लिए Maps 3D SDK की ज़्यादा बेहतर सुविधाओं के बारे में जानें. जैसे, कैमरे के पाथ की ऐनिमेशन, 3D मार्कर या पॉलीगॉन.