Swift と MapKit で地図アプリを作成する（前編）
今回はMapKitを使って、簡単な地図アプリを作ってみます。
アプリの仕様
- アプリ全面に地図を表示する
- 地図にピンを立てる
- ピンをタップするとバルーンが表示される
開発環境
- Xcode 7.1 (7B91b)
- Swift 2.0
ソースコード
今回作成するアプリのソースコードはGitHubにアップしております。
https://github.com/koogawa/MKMapViewSample
準備
1. プロジェクト作成
Xcode のメニューから File > New > Project を選択します。今回は「Single View Application」を選択します。
プロジェクトの情報を入力します。
- Product Name：今回は「MKMapViewSample」としました
- Organization Name：あなたの組織名
- Organization Identifier：サンプルアプリなので適当で良いです
- Language：Swift
- Devices：iPhone
保存場所を聞かれるので、適当な場所に保存します。Gitのチェックボックスはとりあえず外しておいて大丈夫です。
2. MapKit.framework追加
地図を扱うために、MapKit.framework を Linked Frameworks and Libraries に追加します。
3. MapView貼り付け
画面左のソースツリーから Main.storyboard を選択します。
View の上に Map Kit View をドラッグします。
これで画面に地図を表示するアプリができました。いったんビルドしてアプリを動かしてみましょう。（Command+R）
おっと、地図のサイズがおかしいですね。 Auto Layout を使ってサイズを調整していきましょう。
Story Board の MapViewを選択した状態で、画面右下のPinボタンをクリックします。制約を設定するポップアップが出てくるので、上下左右の余白をすべて 0 にしましょう。マージンは必要ないので「Constrain to margins」にはチェックを入れないようにしてください。ボタンが「Add 4 Constrains」になっていることを確認してクリックします。
Story Board 上の MapView サイズも制約に合わせて調整します。 MapViewを選択した状態で、画面右下の「Resolve Auto Layout Issues」ボタンをクリックします。
Selected Views の「Update Frames」をクリックします。
これで地図が画面いっぱいに表示されるようになります。
実装
ここからはコードを少し書いていきます。エディタで ViewController.swift を開いておいてください。
インポート
まずは、地図を扱えるように MapKit をインポートします。
import MapKit
Story Boardとソースコード結びつけ
次に、画面右上の「Show the Assistant Editor」をクリックし、エディタを2分割します。左側に Story Board、右側に ViewController.swift を表示します。
Story Board 上の MapView を ViewController.swift で扱うために結びつけます。control キーを押しながら Map View をドラッグし、ViewController.swift で離します。
「Name」は mapView とします。
ソースコードが次のようになっていることを確認してください。
class ViewController: UIViewController { @IBOutlet weak var mapView: MKMapView! override func viewDidLoad() {
特定の位置を表示
表示したい位置を CLLocationCoordinate2DMake メソッドで指定します。今回はアップル本社周辺（緯度37.331652997806785, 経度-122.03072304117417）を表示してみます。
let coordinate = CLLocationCoordinate2DMake(37.331652997806785, -122.03072304117417)
表示する範囲を MKCoordinateSpanMake メソッドで指定します。数値が小さくなるほど表示される領域は狭くなります。（つまり、ズームレベルが高くなる）
let span = MKCoordinateSpanMake(0.01, 0.01)
最後にこの「位置」と「表示範囲」から Region オブジェクトを生成し、MapViewにセットします。
let region = MKCoordinateRegionMake(coordinate, span) mapView.setRegion(region, animated:true)
これでアップル本社周辺が表示されたと思います。
まとめ
今回は地図を画面いっぱいに表示するところまで実装しました。
次回は地図上にピンを表示していきます。
