PricingLoginStart free
Swift Academy · Lektion

Visning af kort i SwiftUI

Vis kort og annotations med Map.

Lektion 3 af 413 trin

Visning af kort i SwiftUI er en gratis Swift Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Swift Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Swift Academy-kurset indeholder 4 lektioner i alt.

SwiftUI-Map-visningen

SwiftUI indeholder en indbygget Map-visning (i MapKit), som kan vise interaktive kort uden UIKit. Importér MapKit, og placér en Map i dit visningshierarki. Siden iOS 17 bruger den en moderne, deklarativ API.

import SwiftUI
import MapKit

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

Koordinatområder

Et område beskrives af en MKCoordinateRegion — en centrumkoordinat plus et spænd (hvor meget breddegrad og længdegrad der er synligt). Mindre spænd zoomer tættere ind.

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

Styring af kameraet med position

Den moderne Map tager en binding til MapCameraPosition. Du kan starte med et område, et rektangel eller automatisk indramme indhold. Brug .region(...) til at angive et bestemt 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)
    }
}

Tilføjelse af en markør

Marker placerer en standardballon ved en koordinat med en titel. Placér markører i den afsluttende closure for Map (en indholdsopbygger til kortet).

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

Tilpasning af markører

Markører accepterer et systemImage og en farvetone, så du kan angive kategorier. Det gør dem visuelt forskellige på kortet.

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

Annoteringer med tilpassede visninger

Når en nål ikke er nok, lader Annotation dig gengive enhver SwiftUI-visning ved en koordinat. Angiv en titel og en closure til indholdet.

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

Visning af flere nåle fra data

Gennemløb din model med ForEach i kortets indholdsopbygger for at gengive mange markører. Hvert element leverer 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)
    }
}

Visning af brugerens position

Føj UserAnnotation() til kortets indhold for at vise den velkendte blå prik. Det kræver, at der er givet tilladelse til positionen. Du kan kombinere den med dine egne markører.

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

Kortkontroller

Tilføj standardkontroller med modifikatoren .mapControls: et kompas, en knap til brugerens position og en målestokvisning. De vises automatisk og følger kortstilen.

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

Kortstil

Brug modifikatoren .mapStyle til at skifte mellem standard-, billed- (satellit-) og hybridvisninger. Du kan også slå realistisk højdedata og interessepunkter til eller fra.

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

Reaktion på kameraændringer

Modifikatoren .onMapCameraChange rapporterer, når det synlige område ændres (f.eks. efter at brugeren har flyttet kortet). Brug den til at hente data for det nye synlige område.

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

Hurtigt tjek: SwiftUI-kort

Tjek din viden om MapKit i SwiftUI.

Besvar den i den interaktive lektion

Opsummering: Visning af kort i SwiftUI

Du kan nu opbygge interaktive kort:

  • Brug den moderne Map med en binding til MapCameraPosition.
  • Placér Marker-objekter, eller gengiv tilpassede Annotation-visninger ved at gennemløbe data med ForEach.
  • Vis den blå prik med UserAnnotation(), og tilføj .mapControls.
  • Tilpas kortets stil, og reagér på kameraændringer med .onMapCameraChange.
Gratis at komme i gang

Lær Swift med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
122
Lektioner
409
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Visning af kort i SwiftUI” gratis?

Ja — alle 3 lektioner i læringssporet Swift Academy, inklusive “Visning af kort i SwiftUI”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Swift Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Visning af kort i SwiftUI”?

Vis kort og annotations med Map. Du øver dig i Swift Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Swift Academy?

Der kræves ingen tidligere erfaring. Swift Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Visning af kort i SwiftUI”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Swift Academy-lektion?

Ja. Alle Swift Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Anmodning om lokationstilladelse
  2. Hentning af brugerens lokation
  3. Visning af kort i SwiftUI
  4. Geocoding og regioner
← Tilbage til Swift Academy