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

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

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

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

• Google Cloud प्रोजेक्ट में, iOS के लिए Maps 3D SDK चालू होना चाहिए
• 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 की ज़रूरत होती है:

   • .हाइब्रिड, या
   • .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() प्रॉपर्टी को शामिल करने के लिए, 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 मार्कर या पॉलीगॉन.