MapKitをSwiftUIで使ってみた

1 はじめに
2 地図の表示
- 2.1 クリッピング表示
3 地図にアノテーションを表示する
4 さいごに
5 おすすめ書籍

はじめに

iOS14からSwiftUIがMapKitに対応出来るようになったので、今回は一通り基本的な使い方を紹介したいと思います。

地図の表示

まずは地図を表示したいと思います。iOS14からは以下のようにMapKitがimportできるようになっています。

 import SwiftUI import MapKit

1 2	import SwiftUI import MapKit

そうしたら緯度経度など表示領域を指定する為、MKCoordinateRegionを宣言します。今回は東京タワーを中心に東西南北1000メートル四方の領域が表示される縮尺で設定しています。

 @State var region = MKCoordinateRegion( center : CLLocationCoordinate2D( // 緯度経度 latitude: 35.658584, longitude: 139.7454316 ), latitudinalMeters: 1000.0, // 南北距離 longitudinalMeters: 1000.0 // 東西距離 )

@State var region = MKCoordinateRegion(

center : CLLocationCoordinate2D(

// 緯度経度

latitude: 35.658584,

longitude: 139.7454316

latitudinalMeters: 1000.0, // 南北距離

longitudinalMeters: 1000.0 // 東西距離

)

bodyに上記のregionを引数にしてMap(coordinateRegion:)を呼び出します。

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

var body: some View {

Map(coordinateRegion: $region)

}

これだけで地図が表示されます。

クリッピング表示

イメージと同じようにMapもクリッピング表示ができます、画面の一部分だけにマップを表示したい場合や、デザインにマッチさせることも簡単に行えます。

 var body: some View { Map(coordinateRegion: $region) .clipShape(Circle()) .padding(40) }

var body: some View {

Map(coordinateRegion: $region)

.clipShape(Circle())

.padding(40)

}

これで円形にクリッピングして表示ができました。

地図にアノテーションを表示する

マーカーの配置

マーカーの配置用に構造体Spotを作成します。

 struct Spot: Identifiable { let id = UUID() let latitude: Double let longitude: Double var coordinate: CLLocationCoordinate2D { CLLocationCoordinate2D(latitude: latitude, longitude: longitude) } }

struct Spot: Identifiable {

let id = UUID()

let latitude: Double

let longitude: Double

var coordinate: CLLocationCoordinate2D {

CLLocationCoordinate2D(latitude: latitude, longitude: longitude)

}

Spotの配列を作成します、今回は３箇所にマーカーを配置します。

 let spotList = [ Spot(latitude: 35.658326, longitude: 139.7444068), Spot(latitude: 35.6580573, longitude: 139.7439443), Spot(latitude: 35.6599996, longitude: 139.7426848) ]

let spotList = [

Spot(latitude: 35.658326, longitude: 139.7444068),

Spot(latitude: 35.6580573, longitude: 139.7439443),

Spot(latitude: 35.6599996, longitude: 139.7426848)

]

spotlistを使用して地図にマーカーを配置します。

 var body: some View { Map(coordinateRegion: $region, annotationItems: spotList, annotationContent: { spot in MapMarker(coordinate: spot.coordinate, tint: .blue) } ) }

var body: some View {

Map(coordinateRegion: $region,

annotationItems: spotList,

annotationContent: { spot in

MapMarker(coordinate: spot.coordinate, tint: .blue)

}

)

}

地図にマーカーが表示されました。

ピンの表示

ピンを表示するには先ほどのMapMarkerをMapPinに変えるだけです。

 var body: some View { Map(coordinateRegion: $region, annotationItems: spotList, annotationContent: { spot in MapPin(coordinate: spot.coordinate, tint: .blue) } ) }

var body: some View {

Map(coordinateRegion: $region,

annotationItems: spotList,

annotationContent: { spot in

MapPin(coordinate: spot.coordinate, tint: .blue)

}

)

}

アノテーションのカスタマイズ

標準で用意されているマーカーやピンだけではなく、デザインを指定してアノテーションを使用することもできます。サンプルはイメージとその下にテキストを表示する形式で作成します。まずは先ほどの構造体に表示するテキスト用のパラメータ「name」を追加します。

 struct Spot: Identifiable { let id = UUID() let name: String let latitude: Double let longitude: Double var coordinate: CLLocationCoordinate2D { CLLocationCoordinate2D(latitude: latitude, longitude: longitude) } }

struct Spot: Identifiable {

let id = UUID()

let name: String

let latitude: Double

let longitude: Double

var coordinate: CLLocationCoordinate2D {

CLLocationCoordinate2D(latitude: latitude, longitude: longitude)

}

spotlistを修正します。

 let spotList = [ Spot(name: "スポット１",latitude: 35.6591279, longitude: 139.7481028), Spot(name: "スポット2",latitude: 35.6580573, longitude: 139.7439443), Spot(name: "スポット3",latitude: 35.6599996, longitude: 139.7426848) ]

let spotList = [

Spot(name: "スポット１",latitude: 35.6591279, longitude: 139.7481028),

Spot(name: "スポット2",latitude: 35.6580573, longitude: 139.7439443),

Spot(name: "スポット3",latitude: 35.6599996, longitude: 139.7426848)

]

MapAnnotationメソッドでカスタムアノテーションを作成します。

 var body: some View { Map(coordinateRegion: $region, annotationItems: spotList, annotationContent: { spot in MapAnnotation(coordinate: spot.coordinate, anchorPoint: CGPoint(x: 0.5, y: 0.5), content: { Image(systemName: "house.fill").foregroundColor(.blue) Text(spot.name).italic() }) } ) }

var body: some View {

Map(coordinateRegion: $region,

annotationItems: spotList,

annotationContent: { spot in

MapAnnotation(coordinate: spot.coordinate, anchorPoint: CGPoint(x: 0.5, y: 0.5),

content: {

Image(systemName: "house.fill").foregroundColor(.blue)

Text(spot.name).italic()

})

}

)

}

そうしたら、このように表示されます。

さいごに

SwiftUIで出来ることも増えてきているので、そろそろSwiftUIでアプリを１本作ってみようかなと思います。

日	月	火	水	木	金	土
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

MapKitをSwiftUIで使ってみた

はじめに

地図の表示

クリッピング表示

地図にアノテーションを表示する

マーカーの配置

ピンの表示

アノテーションのカスタマイズ

さいごに

おすすめ書籍

フォロー

アプリ情報