地図を表示する

Published by @SoNiceInfo at 6/24/2020

地図を表示するにはMapKitを使います。

iOS 14対応

Map(coordinateRegion: Binding<MKCoordinateRegion>)でマップを表示することができます。
下のスクリーンショットと同じ結果になります。

import SwiftUI
import MapKit

struct ContentView: View {
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 35.655164046, longitude: 139.740663704), span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1))

    var body: some View {
        Map(coordinateRegion: $region)
            .edgesIgnoringSafeArea(.all)
    }
}

iOS 13対応

UIViewRepresentableでMKMapViewをSwiftUIで使えるようにする必要があります。

UIViewRepresentable

SwiftUIの標準機能で地図を表示することはできません。
地図を表示するにはMapKitを利用する必要があります。
UIViewRepresentableを使ってSwiftUIでMapKitを使えるようにします。
UIViewRepresentableはMapKitだけでなくUIKitをSwiftUIで使うときに使われます。

makeUIView

makeUIViewはUIKitのUIViewを初期化して作成するものです。
UIViewRepresentableの中で最初に1度だけ呼び出されます。
更新があったときなど2回目以降はupdateUIViewが呼び出されます。
ここではMapKitのMKMapViewを準備しています。

updateUIView

updateUIViewはViewで更新があったときなど2回目以降に呼び出されます。
updateUIView内で初期位置や縮尺を設定する必要があります。

CLLocationCoordinate2Dは緯度と経度を表します。この例では東京タワーの緯度と経度を利用します。
MKCoordinateSpanは縮尺を表します。
MKCoordinateRegionで設定したい地図の緯度経度、縮尺を設定します。
最後にsetRegion()でMKMapViweのuiViewに設定値を渡してあげます。

//
//  ContentView.swift
//

import SwiftUI
import MapKit

struct ContentView: View {
    var body: some View {
        MapView()
            .edgesIgnoringSafeArea(.all)
    }
}

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ uiView: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 35.655164046, longitude: 139.740663704)
        let span = MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        uiView.setRegion(region, animated: true)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

参考