Swift Academy · पाठ

SwiftUI में मानचित्र प्रदर्शित करना

Map से मानचित्र और एनोटेशन दिखाइए।

पाठ 3, कुल 4 में से13 चरण

SwiftUI में मानचित्र प्रदर्शित करना, CoddyKit पर Swift Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Swift Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Swift Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

SwiftUI का मानचित्र दृश्य

SwiftUI, UIKit के बिना इंटरैक्टिव मानचित्र दिखाने के लिए एक मूल Map दृश्य, MapKit में, उपलब्ध कराता है। MapKit इंपोर्ट करें और अपने दृश्य पदानुक्रम में एक Map रखें। iOS 17 से यह आधुनिक, घोषणात्मक API का उपयोग करता है।

import SwiftUI
import MapKit

struct BasicMap: View {
    var body: some View {
        Map()
    }
}

निर्देशांक क्षेत्र

किसी क्षेत्र का वर्णन MKCoordinateRegion द्वारा किया जाता है — इसमें एक केंद्रीय निर्देशांक और विस्तार होता है, जो बताता है कि अक्षांश और देशांतर का कितना भाग दिखाई दे रहा है। छोटे विस्तार से दृश्य अधिक नज़दीक दिखाई देता है।

let region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(latitude: 41.008, longitude: 28.978),
    span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
)

स्थिति से कैमरा नियंत्रित करना

आधुनिक Map में MapCameraPosition की बाइंडिंग दी जाती है। आप किसी क्षेत्र, आयत से शुरू कर सकते हैं या सामग्री को अपने-आप फ़्रेम में ला सकते हैं। स्पष्ट क्षेत्र निर्धारित करने के लिए .region(...) का उपयोग करें।

struct CityMap: View {
    @State private var position: MapCameraPosition = .region(
        MKCoordinateRegion(
            center: .init(latitude: 41.008, longitude: 28.978),
            span: .init(latitudeDelta: 0.1, longitudeDelta: 0.1)
        )
    )
    var body: some View {
        Map(position: $position)
    }
}

मार्कर जोड़ना

Marker किसी निर्देशांक पर शीर्षक के साथ एक मानक गुब्बारा-पिन रखता है। मार्कर को Map के अंतिम क्लोज़र, यानी मानचित्र सामग्री निर्माता, के भीतर रखें।

Map {
    Marker("Hagia Sophia",
           coordinate: .init(latitude: 41.0086, longitude: 28.9802))
}

मार्कर को अनुकूलित करना

श्रेणियाँ दर्शाने के लिए मार्कर systemImage और tint स्वीकार करते हैं। इससे वे मानचित्र पर देखने में अलग दिखाई देते हैं।

Map {
    Marker("Cafe", systemImage: "cup.and.saucer.fill",
           coordinate: cafeCoord)
        .tint(.brown)
}

कस्टम दृश्यों के साथ एनोटेशन

जब कोई पिन पर्याप्त न हो, तो Annotation आपको किसी निर्देशांक पर कोई भी SwiftUI दृश्य दिखाने देता है। एक शीर्षक और सामग्री क्लोज़र दें।

Map {
    Annotation("Office", coordinate: officeCoord) {
        Image(systemName: "building.2.fill")
            .padding(6)
            .background(.blue, in: Circle())
            .foregroundStyle(.white)
    }
}

डेटा से कई पिन दिखाना

कई मार्कर दिखाने के लिए मानचित्र सामग्री निर्माता के भीतर ForEach से अपने मॉडल पर लूप चलाएँ। हर आइटम एक निर्देशांक देता है।

struct Place: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

Map {
    ForEach(places) { place in
        Marker(place.name, coordinate: place.coordinate)
    }
}

उपयोगकर्ता का स्थान दिखाना

परिचित नीला बिंदु दिखाने के लिए मानचित्र सामग्री में UserAnnotation() जोड़ें। इसके लिए स्थान की अनुमति मिल चुकी होना आवश्यक है। आप इसे अपने मार्करों के साथ मिला सकते हैं।

Map {
    UserAnnotation()
    ForEach(places) { p in
        Marker(p.name, coordinate: p.coordinate)
    }
}

मानचित्र नियंत्रण

.mapControls संशोधक से मानक नियंत्रण जोड़ें: एक कम्पास, उपयोगकर्ता-स्थान बटन और माप-पैमाना दृश्य। वे अपने-आप दिखाई देते हैं और मानचित्र शैली का पालन करते हैं।

Map { UserAnnotation() }
    .mapControls {
        MapUserLocationButton()
        MapCompass()
        MapScaleView()
    }

मानचित्र शैली

मानक, चित्रात्मक यानी उपग्रह, और hybrid रेंडरिंग के बीच बदलने के लिए .mapStyle संशोधक का उपयोग करें। आप वास्तविकतापूर्ण ऊँचाई और रुचि के स्थानों को भी टॉगल कर सकते हैं।

Map()
    .mapStyle(.hybrid(elevation: .realistic))

कैमरा बदलावों पर प्रतिक्रिया देना

.onMapCameraChange संशोधक तब सूचित करता है जब दिखाई देने वाला क्षेत्र बदलता है, जैसे उपयोगकर्ता के मानचित्र को खिसकाने के बाद। नए दिखाई देने वाले क्षेत्र का डेटा प्राप्त करने के लिए इसका उपयोग करें।

Map(position: $position)
    .onMapCameraChange { context in
        let center = context.region.center
        print("Now centered at:", center.latitude, center.longitude)
    }

त्वरित जाँच: SwiftUI मानचित्र

SwiftUI में MapKit के अपने ज्ञान की जाँच करें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: SwiftUI में मानचित्र दिखाना

अब आप इंटरैक्टिव मानचित्र बना सकते हैं:

MapCameraPosition बाइंडिंग के साथ आधुनिक Map का उपयोग करें।
Marker रखें या कस्टम Annotation दृश्य दिखाएँ और ForEach से डेटा पर लूप चलाएँ।
UserAnnotation() से नीला बिंदु दिखाएँ और .mapControls जोड़ें।
मानचित्र की शैली बदलें और .onMapCameraChange से कैमरा बदलावों पर प्रतिक्रिया दें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ Swift सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 122
पाठ: 409

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “SwiftUI में मानचित्र प्रदर्शित करना” पाठ निःशुल्क है?

हाँ — Swift Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “SwiftUI में मानचित्र प्रदर्शित करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Swift Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“SwiftUI में मानचित्र प्रदर्शित करना” में मैं क्या सीखूँगा?

Map से मानचित्र और एनोटेशन दिखाइए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Swift Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Swift Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Swift Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“SwiftUI में मानचित्र प्रदर्शित करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Swift Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Swift Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Swift Academy पर वापस जाएँ