Swift Academy · Урок

Отображение карт в SwiftUI

Показывайте карты и аннотации с помощью Map.

Урок 3 из 413 шагов

«Отображение карт в SwiftUI» — бесплатный урок Swift Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Swift Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Swift Academy содержит 4 уроков всего.

Представление карты SwiftUI

SwiftUI предоставляет встроенное представление Map (из MapKit) для отображения интерактивных карт без UIKit. Импортируйте MapKit и поместите Map в иерархию представлений. Начиная с iOS 17 оно использует современный декларативный API.

import SwiftUI
import MapKit

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

Регионы координат

Регион описывается с помощью MKCoordinateRegion — это центральная координата и охват (видимая область по широте и долготе). Чем меньше охват, тем ближе масштаб.

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

Управление камерой с помощью позиции

Современное представление Map принимает привязку к MapCameraPosition. В качестве начального положения можно задать регион, прямоугольную область или автоматически выбрать содержимое для отображения. Используйте .region(...), чтобы задать конкретную область.

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

Добавление маркера

Marker размещает стандартный маркер с всплывающей подписью в указанной координате и заголовком. Размещайте маркеры внутри замыкания в конце Map (построителя содержимого карты).

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

Настройка маркеров

Маркеры принимают systemImage и оттенок, позволяющие обозначать категории. Благодаря этому их легко различать на карте.

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

Аннотации с пользовательскими представлениями

Если одного маркера недостаточно, Annotation позволяет отобразить любое представление SwiftUI в указанной координате. Укажите заголовок и замыкание с содержимым.

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

Отображение нескольких маркеров из данных

Перебирайте свою модель с помощью ForEach внутри построителя содержимого карты, чтобы отображать множество маркеров. Каждый элемент предоставляет координату.

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

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

Отображение местоположения пользователя

Добавьте UserAnnotation() в содержимое карты, чтобы показать знакомую синюю точку. Для этого необходимо предоставить авторизацию на доступ к местоположению. Её можно сочетать с собственными маркерами.

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

Элементы управления картой

Подключайте стандартные элементы управления с помощью модификатора .mapControls: компас, кнопку местоположения пользователя и представление масштаба. Они появляются автоматически и учитывают стиль карты.

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

Стиль карты

Используйте модификатор .mapStyle, чтобы переключаться между стандартным, спутниковым и гибридным отображением. Также можно включить реалистичный рельеф и точки интереса.

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

Реакция на изменения камеры

Модификатор .onMapCameraChange сообщает об изменении видимого региона (например, после перемещения карты пользователем). Используйте его, чтобы загружать данные для новой видимой области.

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

Быстрая проверка: карты SwiftUI

Проверьте свои знания MapKit в SwiftUI.

Ответь в интерактивном уроке

Итоги: отображение карт в SwiftUI

Теперь Вы можете создавать интерактивные карты:

Используйте современное представление Map с привязкой к MapCameraPosition.
Размещайте Marker или отображайте пользовательские представления Annotation, перебирая данные с помощью ForEach.
Показывайте синюю точку с помощью UserAnnotation() и добавляйте .mapControls.
Настраивайте стиль карты и реагируйте на изменения камеры с помощью .onMapCameraChange.

Можно начать бесплатно

Изучай Swift с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 122
Уроки: 409

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Отображение карт в SwiftUI» бесплатный?

Да — полный текст урока «Отображение карт в SwiftUI» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Swift Academy, подпишись на CoddyKit PRO. Курс Swift Academy содержит 4 уроков всего.

Чему я научусь в уроке «Отображение карт в SwiftUI»?

Показывайте карты и аннотации с помощью Map. Ты практикуешь Swift Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Swift Academy?

Предыдущий опыт не требуется. Swift Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Отображение карт в SwiftUI»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Swift Academy?

Да. Каждый урок Swift Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Swift Academy