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

2016年4月27日2020年6月16日

MKMapViewとは

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

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

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

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

マップビューを試す

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

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

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

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

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

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

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

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

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

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

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

//
//  ViewController.swift
//

import UIKit
import MapKit

class ViewController: UIViewController {

    @IBOutlet weak var testMapView: MKMapView!
    
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //中心座標
        let center = CLLocationCoordinate2DMake(35.690553, 139.699579)

        //表示範囲
        let span = MKCoordinateSpanMake(0.001, 0.001)
        
        //中心座標と表示範囲をマップに登録する。
        let region = MKCoordinateRegionMake(center, span)
        testMapView.setRegion(region, animated:true)

    }
}