Swift Academy · Lektion

Visa kartor i SwiftUI

Visa kartor och annoteringar med Map.

Lektion 3 av 413 steg

Visa kartor i SwiftUI är en gratis lektion i Swift Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Swift Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Swift Academy innehåller totalt 4 lektioner.

SwiftUI-kartvyn

SwiftUI tillhandahåller en inbyggd Map-vy (i MapKit) för att visa interaktiva kartor utan UIKit. Importera MapKit och placera en Map i vyhierarkin. Sedan iOS 17 använder den ett modernt, deklarativt API.

import SwiftUI
import MapKit

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

Koordinatregioner

En region beskrivs av en MKCoordinateRegion — en mittkoordinat plus ett spann som anger hur mycket latitud och longitud som visas. Mindre spann zoomar in mer.

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

Styra kameran med position

Den moderna Map-vyn tar emot en bindning till MapCameraPosition. Du kan börja med en region, en rektangel eller automatiskt rama in innehåll. Använd .region(...) för att ange ett uttryckligt område.

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)
    }
}

Lägga till en markör

Marker placerar en standardiserad kartnål med pratbubbla vid en koordinat och ger den en titel. Placera markörer i Map-vyns trailing closure, som bygger kartinnehållet.

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

Anpassa markörer

Markörer accepterar en systemImage och en färgton för att representera kategorier. Det gör dem visuellt särskiljbara på kartan.

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

Annoteringar med anpassade vyer

När en kartnål inte räcker låter Annotation dig visa valfri SwiftUI-vy vid en koordinat. Ange en titel och en content closure.

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

Visa flera kartnålar från data

Iterera över din modell med ForEach i kartinnehållsbyggaren för att visa många markörer. Varje element tillhandahåller en koordinat.

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

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

Visa användarens plats

Lägg till UserAnnotation() i kartinnehållet för att visa den välkända blå punkten. Detta kräver att platsbehörighet har beviljats. Du kan kombinera den med dina egna markörer.

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

Kartkontroller

Koppla standardkontroller med modifieraren .mapControls: en kompass, en knapp för användarens plats och en skalvy. De visas automatiskt och följer kartans stil.

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

Kartstil

Använd modifieraren .mapStyle för att växla mellan standardvisning, bildmaterial (satellit) och hybridvisning. Du kan även aktivera realistiska höjddata och intressepunkter.

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

Reagera på kameraförändringar

Modifieraren .onMapCameraChange rapporterar när det synliga området ändras, till exempel efter att användaren har panorerat. Använd den för att hämta data för det nyligen synliga området.

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

Snabbtest: SwiftUI-kartor

Testa dina kunskaper om MapKit i SwiftUI.

Besvara frågan i den interaktiva lektionen

Sammanfattning: Visa kartor i SwiftUI

Nu kan du skapa interaktiva kartor:

Använd den moderna Map-vyn med en bindning till MapCameraPosition.
Placera ut Marker-markörer eller visa anpassade Annotation-vyer genom att iterera över data med ForEach.
Visa den blå punkten med UserAnnotation() och lägg till .mapControls.
Anpassa kartans stil och reagera på kameraförändringar med .onMapCameraChange.

Gratis att börja

Lär dig Swift med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 122
Lektioner: 409

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Visa kartor i SwiftUI” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Swift Academy, inklusive ”Visa kartor i SwiftUI”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Swift Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Visa kartor i SwiftUI”?

Visa kartor och annoteringar med Map. Ni övar på Swift Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Swift Academy?

Du behöver inga förkunskaper. Utbildningen i Swift Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Visa kartor i SwiftUI”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Swift Academy-lektionen?

Ja. Varje Swift Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Swift Academy