Swift Academy · Lekcja

Wyświetlanie map w SwiftUI

Wyświetlanie map i adnotacji za pomocą Map.

Lekcja 3 z 413 kroki

Wyświetlanie map w SwiftUI to bezpłatna lekcja Swift Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Swift Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Swift Academy zawiera 4 lekcji w sumie.

Widok Map w SwiftUI

SwiftUI udostępnia natywny widok Map (w MapKit) do wyświetlania interaktywnych map bez użycia UIKit. Należy zaimportować MapKit i umieścić widok Map w hierarchii widoków. Od iOS 17 korzysta on z nowoczesnego, deklaratywnego interfejsu API.

import SwiftUI
import MapKit

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

Regiony współrzędnych

Region opisuje obiekt MKCoordinateRegion — składa się on ze współrzędnej środka oraz rozpiętości określającej, jaki zakres szerokości i długości geograficznej jest widoczny. Mniejsza rozpiętość oznacza większe powiększenie.

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

Sterowanie kamerą za pomocą pozycji

Nowoczesny widok Map przyjmuje wiązanie do MapCameraPosition. Początkowo można ustawić region, prostokąt albo automatyczne kadrowanie zawartości. Użyj .region(...), aby ustawić konkretny obszar.

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

Dodawanie znacznika

Marker umieszcza przy współrzędnych standardową pinezkę w formie dymku i nadaje jej tytuł. Znaczniki należy umieszczać w końcowym domknięciu widoku Map, czyli konstruktorze zawartości mapy.

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

Dostosowywanie znaczników

Znaczniki przyjmują systemImage oraz kolor tint, które pozwalają oznaczać kategorie. Dzięki temu są one łatwe do odróżnienia na mapie.

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

Adnotacje z niestandardowymi widokami

Gdy sama pinezka nie wystarcza, Annotation pozwala wyświetlić dowolny widok SwiftUI przy określonych współrzędnych. Należy podać tytuł i domknięcie zawierające zawartość.

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

Wyświetlanie wielu pinezek na podstawie danych

Należy iterować po modelu za pomocą ForEach wewnątrz konstruktora zawartości mapy, aby wyświetlić wiele znaczników. Każdy element dostarcza współrzędne.

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

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

Wyświetlanie lokalizacji użytkownika

Dodaj UserAnnotation() do zawartości mapy, aby wyświetlić dobrze znaną niebieską kropkę. Wymaga to wcześniejszego przyznania autoryzacji do lokalizacji. Można połączyć ją z własnymi znacznikami.

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

Elementy sterujące mapą

Dodaj standardowe elementy sterujące za pomocą modyfikatora .mapControls: kompas, przycisk lokalizacji użytkownika i widok skali. Są one wyświetlane automatycznie i uwzględniają styl mapy.

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

Styl mapy

Użyj modyfikatora .mapStyle, aby przełączać się między renderowaniem standardowym, obrazowym (satelitarnym) i hybrydowym. Można również włączyć realistyczne odwzorowanie ukształtowania terenu oraz punkty zainteresowania.

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

Reagowanie na zmiany kamery

Modyfikator .onMapCameraChange informuje o zmianie widocznego regionu, na przykład po przesunięciu mapy przez użytkownika. Można go wykorzystać do pobierania danych dla nowo widocznego obszaru.

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

Szybki test: mapy SwiftUI

Proszę sprawdzić swoją wiedzę na temat używania MapKit w SwiftUI.

Odpowiedz w interaktywnej lekcji

Podsumowanie: wyświetlanie map w SwiftUI

Wiedzą już Państwo, jak tworzyć interaktywne mapy:

Należy używać nowoczesnego widoku Map z wiązaniem MapCameraPosition.
Można dodawać znaczniki za pomocą Marker lub wyświetlać niestandardowe widoki Annotation, iterując po danych za pomocą ForEach.
Należy wyświetlać niebieską kropkę za pomocą UserAnnotation() i dodawać .mapControls.
Styl mapy można dostosowywać, a na zmiany kamery reagować za pomocą .onMapCameraChange.

Bezpłatny start

Ucz się Swift dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 122
Lekcje: 409

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Wyświetlanie map w SwiftUI” jest bezpłatna?

Tak — pełny tekst „Wyświetlanie map w SwiftUI” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Swift Academy, przejdź na CoddyKit PRO. Kurs Swift Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wyświetlanie map w SwiftUI”?

Wyświetlanie map i adnotacji za pomocą Map. Ćwiczysz Swift Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Swift Academy?

Nie wymagamy żadnego doświadczenia. Swift Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Wyświetlanie map w SwiftUI”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Swift Academy?

Tak. Każda lekcja Swift Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Swift Academy