Swift Academy · Lektion

Karten in SwiftUI anzeigen

Zeigen Sie Karten und Annotationen mit Map an.

Karten in SwiftUI anzeigen ist eine kostenlose Swift Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Swift Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Die SwiftUI-Kartenansicht

SwiftUI stellt in MapKit die native Ansicht Map bereit, um interaktive Karten ohne UIKit anzuzeigen. Importieren Sie MapKit und fügen Sie eine Map in Ihre Ansichtshierarchie ein. Seit iOS 17 verwendet sie eine moderne deklarative API.

import SwiftUI
import MapKit

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

Koordinatenregionen

Eine Region wird durch ein MKCoordinateRegion beschrieben — eine zentrale Koordinate sowie eine Spanne, die angibt, wie viel Breiten- und Längengrad sichtbar ist. Kleinere Spannen vergrößern die Ansicht.

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

Kamera mit Position steuern

Die moderne Map erhält eine Bindung an MapCameraPosition. Sie können mit einer Region oder einem Rechteck starten oder den Inhalt automatisch einpassen lassen. Verwenden Sie .region(...), um einen bestimmten Bereich festzulegen.

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

Eine Markierung hinzufügen

Marker setzt an einer Koordinate eine standardmäßige Markierung mit Titel. Platzieren Sie Markierungen in der abschließenden Closure von Map, dem Map-Content-Builder.

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

Markierungen anpassen

Markierungen akzeptieren ein systemImage und eine Tönung, um Kategorien auszudrücken. Dadurch lassen sie sich auf der Karte visuell unterscheiden.

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

Annotationen mit benutzerdefinierten Ansichten

Wenn eine Markierung nicht ausreicht, können Sie mit Annotation jede beliebige SwiftUI-Ansicht an einer Koordinate darstellen. Geben Sie einen Titel und eine Content-Closure an.

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

Mehrere Markierungen aus Daten anzeigen

Durchlaufen Sie Ihr Modell mit ForEach im Map-Content-Builder, um viele Markierungen darzustellen. Jedes Element liefert eine Koordinate.

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

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

Den Standort des Benutzers anzeigen

Fügen Sie UserAnnotation() zum Karteninhalt hinzu, um den vertrauten blauen Punkt anzuzeigen. Dafür muss die Standortautorisierung erteilt worden sein. Sie können ihn mit eigenen Markierungen kombinieren.

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

Kartensteuerelemente

Fügen Sie mit dem Modifier .mapControls Standardsteuerelemente hinzu: einen Kompass, eine Schaltfläche für den Benutzerstandort und eine Maßstabsansicht. Sie werden automatisch angezeigt und berücksichtigen den Kartenstil.

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

Kartenstil

Verwenden Sie den Modifier .mapStyle, um zwischen Standard-, Bild- (Satelliten-) und hybriden Darstellungen zu wechseln. Sie können außerdem realistische Höhenreliefs und Points of Interest ein- oder ausblenden.

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

Auf Kameraänderungen reagieren

Der Modifier .onMapCameraChange meldet, wenn sich der sichtbare Bereich ändert, etwa nachdem der Benutzer die Karte verschoben hat. Verwenden Sie ihn, um Daten für den neu sichtbaren Bereich abzurufen.

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

Kurztest: SwiftUI-Karten

Testen Sie Ihr Wissen über MapKit in SwiftUI.

Zusammenfassung: Karten in SwiftUI anzeigen

Sie können jetzt interaktive Karten erstellen:

Verwenden Sie die moderne Map mit einer Bindung an MapCameraPosition.
Setzen Sie Marker oder stellen Sie benutzerdefinierte Annotation-Ansichten dar, indem Sie Daten mit ForEach durchlaufen.
Zeigen Sie den blauen Punkt mit UserAnnotation() an und fügen Sie .mapControls hinzu.
Gestalten Sie die Karte und reagieren Sie mit .onMapCameraChange auf Kameraänderungen.

Häufig gestellte Fragen

Ist die Lektion „Karten in SwiftUI anzeigen“ kostenlos?

Ja — der vollständige Text von „Karten in SwiftUI anzeigen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Swift Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Karten in SwiftUI anzeigen“?

Zeigen Sie Karten und Annotationen mit Map an. Du übst Swift Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Swift Academy zu starten?

Keine Vorkenntnisse erforderlich. Swift Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Karten in SwiftUI anzeigen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Swift Academy-Lektion Code schreiben und ausführen?

Ja. Jede Swift Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Swift Academy