LoginSignup
1
1

More than 1 year has passed since last update.

【SwiftUI】MapKitで地図を表示させる

Posted at

MapKitとは

  • Appple純正の地図情報を実装するフレームワーク

  • UIKit、SwiftUIのどちらでも利用可能

  • Xcodeには既に組み込まれているので、「import MapKit」と記述するだけで使用可能

MapKitでできること

  • ジオコーディング…判読可能な住所を地理座標に変換、また逆の変換もできる

  • 検索…付近にある関連の高い場所を検索したり、検索条件に基づいて自動検索補完する

  • Look Around…インタラクティブなパノラマでストリートビューを提供する

  • 選択可能なマップ機能…検索結果をフィルタして、場所に関する詳細を提供することで、ユーザーに関連性の高い地図を表示できる

  • 注釈…特定の場所をカスタマイズした注釈で目立たせたり、わかりやすい説明を追加したり、複数の場所をまとめたりすることができる

  • 経路…入力した開始地点と終了地点に基づき、経路と移動時間を表示できる

  • オーバーレイ…地図上の区域や経路をハイライトするオーバーレイやブレンドモードを追加できる

SwiftUIで使用できるMap

SwiftUIでは、

  • MapKitのMap(UIViewRepresentableを使用しない)
  • UIKitのMKMapView(UIViewRepresentableを使用する)

どちらかを使用してMapを表示することができる。

UIViewRepresentableプロトコルを使用しなくてもMap機能を実装できるが、まだ十分な機能が提供されていないので、
今回MapKitのViewを作成するために、UIViewRepresentableプロトコルを使う。

Mapを表示させる手順

1,MapKitをインポート

import MapKit

MapKit は、アプリ内に地図や衛星画像の表示、地図にピンを配置、住所から地図座標の検索をすることができるフレームワーク。

2,UIViewRepresentableプロトコルを使用

struct MapView: UIViewRepresentable {
// (省略)
} 

「UIViewRepresentable」は、UIKitのViewや機能をSwiftUIでも使えるようにするプロトコル。

SwiftUIはUI部品が構造体(struct)で定義されているのに対し、
MapKitのUI部品はクラス(class)で定義されている。
構造体とクラスではデータ型が異なるため、そのまま利用できない。
また前述したとおり、SwiftUIはまだまだ実装できる機能が少ない。

このことから、「UIKit」と「SwiftUI」の両フレームワークの機能を橋渡しするためのプロトコル「UIViewRepresentable」を使用する。

3,makeUIViewメソッドを使用

// 表示するViewを作成するときに実行
func makeUIView(context: Context) -> MKMapView {
// MKMapViewのインスタンスを生成
MKMapView()
} 

makeUIViewメソッドはUIViewRepresentableプロトコルで必須のメソッド。
makeUIViewメソッドは、画面に表示する前に一度だけ実行され、表示に必要なViewを作成する。
引数contextにはUIKitのView作成と更新に使用するシステムの状態に関するコンテキスト(文脈)情報が渡される。
MKMapViewで初期状態のマップを作成。

4,updateUIViewメソッドを使用

// 表示した View が更新される度に実行
func updateUIView(_ uiView: MKMapView, context: Context) {
// (省略)
} 

updateUIViewメソッドもUIViewRepresentableプロトコルで必須のメソッド。
updateUIViewメソッドは、表示するViewの状態が更新される度に呼び出され実行される。
最初の引数uiViewはUIView型のインスタンスで、makeUIViewメソッドで作成したMKMapViewが設定される。
※updateUIviewメソッドで使っている「_ uiView: MKMapView」の「 _ 」は、ラベルの省略を表す。

あとは、TextFieldを実装して地図を検索できるようにしたり、現在の位置情報を表示する機能を実装したりと色々試すといいと思います。

最後に

MapKitは、最初に記載した通り、「import MapKit」と記述するだけで使用可能な簡単に実装できるフレームワークです。
改良されてきてはいますがまだまだ単体としては弱いので、これからの更新が楽しみです。

今回のコードはGitHubにも上げています。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1