【Swift】Map Kit Viewの使い方。地図上のピンをドラッグ&ドロップで移動して直線を引く。(Swift 2.1、XCode 7.2)

2020年6月16日

ピンの移動とは

前回の記事でMKMapView(以下、マップビュー)の地図に刺したピンの色や画像を変更する方法を説明した。⇒「記事

mapview_pin_color_5color

 

ピンが刺さっているのを見ると、ピンを抜いて別の場所に刺し直したくなる。ピンを抜き差しできれば、ピンの位置が目的地から若干ずれているときの修正が素早く行える。

そこで、本記事ではピンをドラッグ&ドロップで別の場所に移動して表示を更新する方法について説明する。以降の手順は前回記事の続きなので、実装を試してみる人は先に読んでおくことをお勧めする。

 

ピンの移動を実装する

ViewController.swiftを以下のように修正する。地図に刺したピンは2つ。ドラッグ&ドロップで移動したあとに吹き出しのサブタイトルを最新の座標に更新している。

ピンをドラッグ可能にするには「アノテーションビューを返すメソッド」でアノテーションビューのdraggableプロパティをtrueに変える。

ドラッグ開始や終了のタイミングで「ドラッグ&ドロップ時のの呼び出しメソッド」がアプリから呼び出されるので、ドラッグステータスが「ドラッグ終了」のときに吹き出しのサブタイトルを更新している。

 

以下は実際のプレイ動画

 

ドラッグのステータスには、以下の5種類がある。⇒「公式リファレンス

設定名 説明
1 None ステート無し
2 Starting ドラッグ開始
3 Dragging ドラッグ中
4 Canceling キャンセル
5 Ending ドラッグ終了

 

「ドラッグ&ドロップ時の呼び出しメソッド」の中で、引数に渡ってきたMKAnnotationViewインスタンスのannotation.subtitleにそのまま値を設定しようとしてもエラーが発生する。

Cannot assign to property: 'subtitle’ is a get-only property

理由は、annotationの型がMKAnnotationプロトコルのためである。これでは値の参照しかできないので、自作クラスのTestMKPointAnnotationにキャストしてからサブタイトルを変更する。なお、色は変更しないのでMKPointAnnotationにキャストでも良い。

 

ピンとピンの間に直線を引く

サブタイトルの更新だけだと物足りないので、ピンを移動したあとにピンとピンの間に直線が引かれるようにしてみよう。

ViewController.swiftを以下のコードに変更する。「ドラッグ&ドロップ時の呼び出しメソッド」で、前回の描画の削除と、2つのピンの座標をもとに新たな描画メソッドを実行している。

「描画メソッド実行時の呼び出しメソッド」がデリゲートとして呼び出されるので、直線の色、太さを設定したMKOverlayRendererインスタンスを返している。

 

以下は実際のプレイ動画