MKMapViewの利用
SwiftUIでUIKitの機能を利用する場合は、最初にUIViewRepresentableプロトコルを実装したViewを作成します。UIViewRepresentableプロトコルを使ってMKMapViewを表示してみましょう。
地図を表示するViewを作成する
UIViewRepresentableプロトコルを実装してMKMapViewを表示するViewを作成します。UIViewRepresentableプロトコル自体の仕様については、Appleのドキュメントで確認できます。
import SwiftUI
import MapKit // -------- ①
struct MapView: UIViewRepresentable {
// 東京駅
private var mapRegion = MKCoordinateRegion(center:
CLLocationCoordinate2D(latitude: 35.6809591, longitude: 139.7673068),
span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))
// View初期化処理
func makeUIView(context: Context) -> MKMapView { // -------- ②
let mapView = MKMapView(frame: .zero)
mapView.region = mapRegion
mapView.selectableMapFeatures = [.physicalFeatures, .pointsOfInterest] // 選択できる地点
mapView.delegate = context.coordinator. // delegate設定
return mapView
}
// UI更新処理
func updateUIView(_ uiView: MKMapView, context: Context) {
}
// デリゲート設定
func makeCoordinator() -> MapViewCoordinator{ // -------- ③
MapViewCoordinator(self)
}
}
MKMapViewを利用するために最初にMapKitをインポートします（①）。Viewの初期化処理の中で、東京駅を中心とした領域をMKMapViewに指定して初期化します（②）。同時に地図上の選択できる地点をselectableMapFeaturesプロパティで指定します。サンプルでは、physicalFeatures（山脈、河川などの地形上の特徴）、pointsOfInterest（美術館、カフェ、公園など人が集まる地点）を指定できるようにしています。地図の機能も利用したいので、MKMapViewDelegateを実装したMapViewCoordinatorクラスの名前でデリゲートを定義します（③）。MapViewCoordinatorクラスでは、次のようにMKMapViewDelegateを実装したクラスを定義し、そのメソッド内に処理を記述します。
// MapViewのデリゲート
class MapViewCoordinator: NSObject, MKMapViewDelegate {
var mapView: MapView
init(_ control: MapView) {
self.mapView = control
}
# 以降はMKMapViewDelegateのメソッドで処理を記述
}
上記の手順でMKMapViewの機能をSwiftUIからも利用できるようになります。
地図を表示する
前項で作成したMapViewを画面に配置することで、地図を表示できます。
struct ContentView: View {
var body: some View {
VStack {
MapView().edgesIgnoringSafeArea(.all)
}
}
}
UIViewRepresentableプロトコルを実装して定義したViewは、SwiftUIのUI部品と同じように扱うことができます。
