【Swift】Map Kit Viewの使い方。目印として地図にピンを刺す。(Swift 2.1、XCode 7.2)

2020年6月16日

地図のピンとは

前回の記事でMKMapView(以下、マップビュー)を使って指定した位置の地図を表示する方法を説明した。⇒「記事

Map Kit View

 

本記事では、地図上にピンを刺す方法について説明する。ピンとは、目的地などを把握しやすくするためなどに使う地図上に刺す目印のことである。壁に貼り付けた地図に画びょうを刺すイメージだ。

新宿駅

 

地図の中心にピンを刺す

以降の手順は、前回記事の続きからなので、実装を試してみる人は先に読んでおくことをお勧めする。

ViewController.swiftを開き、青色箇所のコードを追記する。MKPointAnntotationクラスは、ピンの座標、タイトル、サブタイトルの変数を持つクラスである。このクラスのインスタンスを作成し、位置を設定してマップビューに追加している。

MKPointAnnotationクラスイメージ

 

 

以下は実際のプレイ動画。中心座標と同じ位置にピンが刺さった。

ピンを使って表示範囲を確認する

ピンは座標を変えて何個でも刺すことができる。そこで、上記コードのMKCoordinateSpanMakeメソッドで指定した表示範囲が、指定したどおりに表示されるかを複数のピンを使って確認してみることにする。

仮に、地図の中心座標を(35.0度,140.0度)、表示範囲を(1.0度,1.0度)に設定した場合、緯度34度〜36度、経度139度〜141度の範囲の地図が表示されるはずである。そこで下図の座標にピンを刺し、すべてのピンが表示されるかを確認する。

mapview_pin_span_image

 

ViewController.swiftを以下のように変更してテストを実施した。

 

下図は実行結果。すべてのピンが画面内に表示された。指定した表示範囲に画面がぴったり収まるような表示にならないのが気になるところではあるが、表示範囲を少し大きくした範囲が表示される。

地図の表示範囲を確認

 

下図は表示範囲を(0.5, 0.5)にして実行した結果。表示範囲を外れたピンが表示されなくなった。ただし、指定した位置には刺さっているので、画面を移動すれば見ることができる。

 

次に、ピンにタイトルとサブタイトルを表示してみよう。ViewController.swiftを以下のように修正する。タイトルには「中心」、「右下」などのピンの場所を表示し、サブタイトルにはピンに設定した座標を表示するようにした。

 

以下が実際のプレイ動画。ピンをタップすると吹き出しでタイトルとサブタイトルが表示される。

 

次回記事は複数のピンに個別に色や画像を設定する方法を説明する。