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

इस पेज पर, 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. बॉडी डिक्लेरेशन के अंदर मौजूद सभी कोड को 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)
       ), mode: .hybrid)
     }
   }
   

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

• center: कैमरे की जगह की जानकारी दिखाने वाला LatLngAltitude
• heading: कैमरे को उत्तर दिशा से जिस दिशा में घुमाना है उसका ऐंगल डिग्री में.
• tilt: डिग्री में झुकाव का कोण, जहां 0 सीधे ऊपर की ओर और 90 क्षैतिज रूप से देखना है.
• roll: कैमरे के वर्टिकल प्लेन के आस-पास रोल का ऐंगल, डिग्री में.
• range: अक्षांश और देशांतर की जगह से कैमरे की दूरी, मीटर में
• fieldOfView: कैमरे के फ़ील्ड ऑफ़ व्यू को दिखाने वाला ऐंगल

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

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

पांचवां चरण: अपने ऐप्लिकेशन की झलक देखना और उसे चलाना

1. Xcode Preview जोड़ना

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

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

   #Preview {
     ContentView()
   }
   

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

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

मैप लोड होने और गड़बड़ी वाले पेज की स्थितियां

iOS के लिए Maps 3D SDK, Map की स्थिति को मैनेज करते समय, पहले से मौजूद विज़ुअल फ़ीडबैक को अपने-आप दिखाता है:

• लोडिंग ओवरले: मैप व्यू को पहली बार शुरू करने या लोड करने पर, बीच में प्रोग्रेस इंडिकेटर दिखता है.
• गड़बड़ी का ओवरले: अगर मैप लोड नहीं हो पाता है, तो गड़बड़ी का ओवरले दिखता है.

अगर Map पर style(mapID:error:) का इस्तेमाल करके, क्लाउड पर मैप की स्टाइलिंग की सुविधा लागू की जाती है, तो स्टाइल लोड होने से जुड़ी गड़बड़ियों को ठीक करने के लिए, error क्लोज़र पास किया जा सकता है.

मैप पर टैप करने से जुड़े इवेंट को मॉनिटर करने की अनुमति

मैप पर टैप इवेंट सुनने के लिए, Map पर onTap(_:) मॉडिफ़ायर लागू करें. जब कोई उपयोगकर्ता मैप पर टैप करता है, तो क्लोज़र को एक MapTapInfo वैल्यू मिलती है. इससे location (LatLngAltitude) और टैप किए गए content (MapTapInfo.Content.map या MapTapInfo.Content.place(id:)) की जानकारी मिलती है. दिलचस्पी की जगहों के इंटरैक्शन के बारे में ज़्यादा जानने के लिए, दिलचस्पी की जगहों के साथ इंटरैक्ट करना लेख पढ़ें.

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

बधाई हो!

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

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