Published on

MapKit va Map view β€” xaritalar bilan ishlash

Authors

MapKit β€” Apple ning xarita framework i. U xaritalarni ko'rsatish, joylashuv aniqlash, marshrut qurish va joy qidirish uchun ishlatiladi. iOS 17 dan boshlab SwiftUI da to'liq Map API mavjud β€” Map { } bloki ichiga Marker, Annotation, va boshqa elementlarni qo'shish mumkin.

MapKit ning asosiy komponentlari: Map β€” xarita ko'rinishi, Marker β€” standart pin (joy belgisi), Annotation β€” o'zingizning maxsus View ingiz bilan belgilanadigan joy, MapCameraPosition β€” xarita kamerasining pozitsiyasi (qaysi hudud ko'rsatiladi).

Map asoslari

Eng oddiy xarita β€” Map { } bo'sh blok. U foydalanuvchi joylashuvini ko'rsatadi. Joylarga pin qo'yish uchun Marker ishlatiladi β€” unga nom va koordinata beriladi. .tint() bilan rang berish mumkin.

import MapKit

// ═══════════════════════════════════════
//  ODDIY XARITA
// ═══════════════════════════════════════
struct XaritaKorinishi: View {
    var body: some View {
        Map {
            // Bo'sh xarita β€” foydalanuvchi joylashuvi atrofida
        }
    }
}


// ═══════════════════════════════════════
//  MARKERLAR BILAN XARITA
// ═══════════════════════════════════════
struct MarkerliXarita: View {
    var body: some View {
        Map {
            // Marker β€” standart pin
            Marker("Toshkent", coordinate:
                CLLocationCoordinate2D(latitude: 41.2995, longitude: 69.2401)
            )
            .tint(.red)

            Marker("Samarqand", coordinate:
                CLLocationCoordinate2D(latitude: 39.6542, longitude: 66.9597)
            )
            .tint(.blue)

            Marker("Buxoro", coordinate:
                CLLocationCoordinate2D(latitude: 39.7745, longitude: 64.4227)
            )
            .tint(.green)
        }
    }
}

Xarita pozitsiyasi va uslubi

MapCameraPosition β€” xarita qaysi hududni ko'rsatishini boshqaradi. MKCoordinateRegion bilan markaz nuqta va masshtab belgilanadi. selection parametri bilan foydalanuvchi marker ni tanlashini kuzatish mumkin. .mapStyle() bilan xarita ko'rinishini o'zgartirish mumkin: .standard (oddiy), .satellite (sun'iy yo'ldosh), .hybrid (aralash).

struct SozlanuvchanXarita: View {
    // Xarita kamera pozitsiyasi
    @State private var kameraPozitsiyasi: MapCameraPosition = .region(
        MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 41.2995, longitude: 69.2401),
            span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
        )
    )
    @State private var tanlangan: String?

    var body: some View {
        Map(position: $kameraPozitsiyasi, selection: $tanlangan) {
            Marker("Chorsu bozori", coordinate:
                CLLocationCoordinate2D(latitude: 41.3268, longitude: 69.2293)
            )
            .tag("chorsu")

            Marker("Amir Temur maydoni", coordinate:
                CLLocationCoordinate2D(latitude: 41.3112, longitude: 69.2797)
            )
            .tag("temur")
        }
        // Xarita uslubi
        .mapStyle(.standard(elevation: .realistic))
        // Boshqa uslublar:
        // .satellite           β€” sun'iy yo'ldosh
        // .hybrid              β€” gibrid (xarita + yo'ldosh)
        // .standard(pointsOfInterest: .excludingAll)
    }
}

Maxsus Annotation

Annotation β€” standart pin o'rniga o'zingizning View ingizni xarita ustiga qo'yish. Masalan, ikonka, matn, rasm yoki animatsiya. ForEach bilan dinamik ro'yxatdan annotation yaratish mumkin.

// ═══════════════════════════════════════
//  ANNOTATION β€” o'z View ingiz bilan
// ═══════════════════════════════════════
struct MaxsusAnnotatsiya: View {
    let joylar = [
        Joy(nomi: "Cafe", lat: 41.311, lng: 69.279, ikon: "cup.and.saucer.fill"),
        Joy(nomi: "Park", lat: 41.315, lng: 69.285, ikon: "tree.fill"),
    ]

    var body: some View {
        Map {
            ForEach(joylar) { joy in
                Annotation(joy.nomi, coordinate: joy.koordinata) {
                    // Istalgan SwiftUI View!
                    VStack(spacing: 0) {
                        Image(systemName: joy.ikon)
                            .font(.title2)
                            .foregroundStyle(.white)
                            .padding(8)
                            .background(.blue.gradient)
                            .clipShape(Circle())

                        // Uchburchak ko'rsatkich
                        Image(systemName: "triangle.fill")
                            .font(.caption2)
                            .foregroundStyle(.blue)
                            .rotationEffect(.degrees(180))
                            .offset(y: -3)
                    }
                }
            }
        }
    }
}

struct Joy: Identifiable {
    let id = UUID()
    let nomi: String
    let lat: Double
    let lng: Double
    let ikon: String
    var koordinata: CLLocationCoordinate2D {
        CLLocationCoordinate2D(latitude: lat, longitude: lng)
    }
}

Joy qidirish

// ═══════════════════════════════════════
//  JOY QIDIRISH β€” MKLocalSearch
// ═══════════════════════════════════════
class XaritaViewModel: ObservableObject {
    @Published var natijalar: [MKMapItem] = []

    func qidirish(matn: String) async {
        let sorov = MKLocalSearch.Request()
        sorov.naturalLanguageQuery = matn
        sorov.region = MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 41.3, longitude: 69.28),
            span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
        )

        do {
            let qidiruv = MKLocalSearch(request: sorov)
            let javob = try await qidiruv.start()
            natijalar = javob.mapItems
        } catch {
            print("Qidiruv xatosi: \(error)")
        }
    }
}

🎯 Topshiriq

O'zbekiston xaritasi yarating: 5 ta shaharga Marker qo'ying (Toshkent, Samarqand, Buxoro, Xiva, Farg'ona). Shaharga bosganda .sheet da ma'lumot ko'rsating. Qidiruv funksiyasi qo'shing β€” MKLocalSearch bilan.

Buy mea coffee