【Swift】Map Kit Viewの使い方。位置を指定して地図を表示する。(Swift 2.1、XCode 7.2)

2020年6月16日

MKMapViewとは

本記事ではSwiftで使える部品のMKMapView(以下、マップビュー)について説明する。

Map Kit View

 

マップビューとは、その名の通り地図を表示できるビューである。

これから向かう場所の地図を見たいと思ったときに利用するものといえばGoogleマップ。ブラウザで簡単に目的地の場所や経路を検索できてしまうので便利だ。このような機能をアプリで実装できるのがマップビューである。

なお、昔のマップビューはGoogleマップが表示される仕様だったが、現在ではApple独自のマップが表示されるようになっている。

 

マップビューを試す

マップビューを使うには、別のフレームワークをプロジェクトに追加する必要がある。

下図赤枠のプロジェクト名をクリックしてプロジェクトの設定画面を表示する。黄緑枠のBuild Phasesをクリックして設定項目を切り替え、Link Binary With Libraryの中にある紫枠の+ボタンを押す。

フレームワークの追加ボタンを押す

 

フレームワークの一覧が表示されるので、下図赤枠の検索ボックスで「MapKit.framework」を検索し、Addボタンを押す。これでフレームワークの追加が完了。

Map Viewのフレームワークを検索する

 

次に、デバイス画面にマップビューを配置する(下図赤矢印)。下図黄緑枠のPinボタンを押して吹き出しの設定画面を表示し、Constrain to marginsのチェックを外す。水色枠の上下左右の距離の制約に0を入力し、「Add 4 constraints」ボタンを押す。これでマップビューが画面いっぱいに表示されるようになった。

MKMapViewをデバイス画面に配置

 

この段階でアプリを起動すると以下の動画のようになる。

ちなみに、筆者は最初マップがうまく表示されずに罫線(グリッド線)しか表示されなくてハマった。Macの日付と時刻の設定が時間帯が自動的に設定されるようになっていなかったので、自動に変更してみたところマップが表示されるようになった。

指定した位置の地図を表示する。

次に、表示する地図の位置をソースコードで指定してみよう。

下図赤枠のアシスタントエディタボタンを押してViewController.swiftを開く。

Ctrlキーを押しながらマップビューをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示する。Connectionに「Outlet」、Nameに「testMapView」を入力してConnectボタンを押す。これでソースコードからマップビューを操作できるようになった。

MKMapViewとソースコードのコネクションを確立する

 

ViewController.swiftを以下のコードのように修正する。中心座標と表示範囲をマップに登録している。

 

中心座標を指定する箇所で、小数点以下の桁がやたら長い数字を引数に与えているが、これは緯度と経度を表している。

緯度と経度の考え方を忘れてしまった人のために簡単に説明しておこう。

まず、世界地図をざっくり描くと下図のようになる。赤線は赤道を表していて、青線はイギリスのグリニッジ天文台から赤道に垂直に交わるようにまっすぐ引いた線を表している。

この2つの線が交わったところが基準点となり、ここから東西に進んだ位置を「経度」、南北に進んだ位置を「緯度」という。緯度は-90〜90度、経度は-180〜180度で表される。例えば地図を眺めると、日本は緯度35度前後、経度139度前後に位置していることが分かる。

緯度と経度の全体図

 

緯度、経度の度数とは何かについて説明する。

まず下図のように、基準点から地球の中心に向かって直線(以下基準線)を引く。そして、赤道の垂直方向に地球を歩いて行ったある地点から地球の中心に向かって直線を引く。この直線と基準線とが交わる角度が緯度になる(下図では60度)。

基準点に戻り、今度は赤道の上を歩いて行ったある地点から地球の中心に向かって直線を引く。この直線と基準線とが交わる角度が経度になる(下図では45度)。

earth_edo_keido_image

 

つまり、地球を透明にして中心に目玉をつけ、そこから基準点を眺めた位置を0とする。そして、垂直方向の角度、水平方向の角度を調整して地球上のすべての位置を把握するイメージである。

地球の直径は約12742km。これだけ距離があると角度が1度違うだけで100キロ以上の差になる。そのため、中心座標の値が緯度35.690553度、経度139.699579度のようなやたら細かい数値になるわけだ。

「経度はプラスマイナス180度までなのに、緯度がプラスマイナス90度までなのはなぜか。」

緯度をプラスマイナス180度までにしても座標を表現することはできるが、ある地点の緯度と経度の組み合わせが2種類できてしまう。例えば、「緯度100、経度0」と「緯度80、経度180」は同じ座標になる。1つの位置の座標は1つあればいいので、緯度はプラスマイナス90度になる。

以下は実際のプレイ動画