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

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

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

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

• Google Cloud का ऐसा प्रोजेक्ट जिसमें iOS के लिए Maps 3D SDK चालू हो
• iOS के लिए Maps 3D SDK की एपीआई कुंजी
• Xcode का वर्शन 16.0 या इसके बाद का वर्शन, जिसमें iOS के लिए Maps 3D SDK पैकेज जोड़ा गया हो.

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

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

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

पहला हिस्सा: सामान्य SwiftUI ऐप्लिकेशन बनाना

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

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

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

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

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

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

   • .hybrid,
   • .roadmap, या
   • .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(
         center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
         heading: 52,
         tilt: 68,
         roll: 0.0,
         range: 1039,
         fieldOfView: .degrees(50),
         altitudeMode: .relativeToGround
       ), mode: .hybrid)
     }
   }
   

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

• center: LatLngAltitude, जो कैमरे की जगह दिखाता है
• heading: उत्तर से डिग्री में बेयरिंग, ताकि कैमरे को उस दिशा में पॉइंट किया जा सके.
• tilt: डिग्री में टिल्ट का ऐंगल. इसमें 0 का मतलब है कि कैमरा सीधे ऊपर की ओर है और 90 का मतलब है कि कैमरा हॉरिज़ॉन्टली देख रहा है.
• roll: डिग्री में, कैमरे के वर्टिकल प्लेन के चारों ओर रोल का ऐंगल.
• range: मीटर में, अक्षांश और देशांतर की जगह से कैमरे की दूरी
• fieldOfView: डिग्री में, कैमरे के फ़ील्ड ऑफ़ व्यू को दिखाने वाला ऐंगल
• altitudeMode: कैमरे की ऊंचाई का हिसाब कैसे लगाया जाए.

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

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

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

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

1. Xcode की झलक जोड़ें

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

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

   #Preview {
     CameraDemo()
   }
   

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

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

बधाई हो!

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

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