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

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

सिऐटल, सैन फ़्रांसिस्को, और पेरिस के बेसिक मैप

इस पेज पर, 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 लाइब्रेरी जोड़ें. सेटअप सेक्शन में दिए गए निर्देश देखें.

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

ग्लोब का छोटा 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),
          altitudeMode: .relativeToGround
        ), mode: .hybrid)
      }
    }
    

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

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

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

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

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

न्यूयॉर्क शहर का बुनियादी 3D मैप

  1. Xcode Preview जोड़ना

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

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

    #Preview {
      CameraDemo()
    }
    
  2. ऐप्लिकेशन चलाएं

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

बधाई हो!

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

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