1. tomonoriTAKA

    Posted

    tomonoriTAKA
Changes in title
+【備忘録】MapKitとCoreLocationで地図上に現在地を表示する方法①
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,91 @@
+
+*初めての投稿です…もっとこうした方がいい、こういう書き方のほうがいい、ここは違う!等ありましたらご指導よろしくお願いします*。
+
+XcodeはVersion 8.2.1
+SwiftはVersion 3.0.2 です。
+
+
+
+###まずは新しいプロジェクトを作るところから
+
+ XcodeのCreate a New Xcode Project から Single View Applicationを選択します。
+
+ Product Nameは **testMapApp** (任意) にとりあえずしておきます。
+ Languageは **Swift**
+ Devicesは **iPhone**
+ をそれぞれ選択します。
+
+ 下のチェックボックス3つは全て外したままでOK
+
+
+###次にMapKitとCoreLocationの2つのフレームワークを導入します
+
+![framework_intro1.png](https://qiita-image-store.s3.amazonaws.com/0/148994/448c9812-f2d8-48c0-2ca4-42050a09294e.png "framework_intro1.png")
+
+上の画像のように左の testMapApp を選択し、
+TARGETS(Aみたいなマーク)のところの testMapApp を選択し、さらに右上の Build Phases を選択してください。
+
+そうすると4つの▶で始まる項目が表示されるので、そのうちの Link Binary With Libraries のところの▶をクリックして展開してください。
+その中の+マークを押してください。
+![framework_intro2.png](https://qiita-image-store.s3.amazonaws.com/0/148994/59482930-4528-957e-594f-ac823aa604ca.png "framework_intro2.png")
+
+上の画像のように検索バーの中に MapKit と入力して検索すると、
+**MapKit.framework** という名前のフレームワークが表示されるので、それを選択してAdd!
+
+同じ手順で **CoreLocation.framework** もAddしてください。
+
+
+###次にストーリーボードにMapViewを配置して、配置したMapViewをコードと紐付けします
+
+まずはMain.storyboard を選択します。
+右下の検索バーに map と入力するとMapKitViewと出てくるので、それを Storyboard のViewController にドラッグアンドドロップします。
+![MapView検索.png](https://qiita-image-store.s3.amazonaws.com/0/148994/dcde1bde-17d7-5900-3dbc-7b8e9d08fc85.png "MapView検索.png")
+
+
+ドラッグアンドドロップしたMapViewが選択された状態で下に5つ並んでいるボタンの右から2番目を押して制約を追加します。
+上下左右全て0でconstrain to margins のチェックを外してAdd 4 Constraintsをクリック。
+![制約付.png](https://qiita-image-store.s3.amazonaws.com/0/148994/a7e7a3f5-e772-979a-5be9-3b2016e5776e.png "制約付.png")
+
+
+
+その後、下に5つ並んでいるボタンの一番左のUpdateFramesをクリックするとViewControllerいっぱいにMapViewが広がると思います。
+![UpdateFrame前.png](https://qiita-image-store.s3.amazonaws.com/0/148994/3ddf861b-6768-fce3-57f6-3c0c4753f877.png "UpdateFrame前.png")
+
+
+次にコードのほうで ViewController.swift にMapKitとCoreLocationをimportします
+
+```ViewController.swift
+
+import UIKit
+import Mapkit
+import CoreLocation
+
+class ViewController: UIViewController{
+}
+```
+上のように追記しましょう。
+
+もう一度 Main.storyboard を選択し、右上の○が2つ重なっているボタン![アシスタントエディタ.png](https://qiita-image-store.s3.amazonaws.com/0/148994/3c4922d6-e1aa-7135-4144-87e9525ec617.png "アシスタントエディタ.png")
+を押してください。押すと、ストーリーボードの右側にコードの画面が出てくるはずです。
+
+
+
+ViewController上のMapViewを選択します。controlキーを押しながらMapViewをコードの ViewControllerの中にドラッグアンドドロップしましょう。
+![紐付け開始.png](https://qiita-image-store.s3.amazonaws.com/0/148994/2716ec46-0521-7814-6ae6-8bac7b8ab37b.png "紐付け開始.png")
+
+
+
+すると次のような画面が出てくるので testMapView
+などロウワーキャメルケースで名前をつけましょう。
+![紐付け中.png](https://qiita-image-store.s3.amazonaws.com/0/148994/a41a177d-0a02-5944-7697-a2537884db07.png "紐付け中.png")
+
+
+
+次の画像のようになっていればOKです。
+![紐付け完了.png](https://qiita-image-store.s3.amazonaws.com/0/148994/9f428da6-5c2b-d8f1-4d04-b342bc063007.png "紐付け完了.png")
+
+
+
+ここまでできたらcommand+Rでシミュレーターを起動してみましょう。画面いっぱいに地図が表示されればOKです。
+
+続きは②で!