SwiftUIで地図を表示する
Mapで地図とアノテーションを表示します。
「SwiftUIで地図を表示する」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。
SwiftUIのMapビュー
SwiftUIには、UIKitを使わずにインタラクティブな地図を表示できるネイティブのMapビュー（MapKit）が用意されています。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)
)Positionでカメラを制御する
最新の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でマップを表示する
インタラクティブなマップを作成できるようになりました。
MapCameraPositionのバインディングと最新のMapを使用します。Markerを配置するか、カスタムのAnnotationビューを描画し、ForEachでデータをループします。UserAnnotation()で青いドットを表示し、.mapControlsを追加します。- マップのスタイルを設定し、
.onMapCameraChangeでカメラの変更に対応します。
AI チューターと学ぶ Swift — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 122
- レッスン
- 409
よくある質問
「SwiftUIで地図を表示する」レッスンは無料ですか？
はい。「SwiftUIで地図を表示する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。
「SwiftUIで地図を表示する」で何を学びますか？
Mapで地図とアノテーションを表示します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Swift Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「SwiftUIで地図を表示する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwift Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 位置情報の利用許可を求める
- ユーザーの位置情報を取得する
- SwiftUIで地図を表示する
- ジオコーディングとリージョン