iOSプログラミング with Swift 2

2016.05.30: created by

Swiftで地図を表示する

  1. Xcode を起動して "Create a new Xcode project" で "iOS" -> "Application" -> "Single View Application" として新しいプロジェクトを開きます。 ここではプロジェクト名を SwiftMap としています。



  2. プロジェクトの最初に表示される画面は、ウィンドウの左側に表示されている "Show the project navigator" アイコンをクリックしても表示されます。 "General" -> "Linked Frameworks and Libraries" ->"+"ボタン を押して CoreLocation.framework を追加します。









  3. Main.storyboard上の ViewController に、右下の "Object library" から "MapKit" をドラッグして画面に配置し画面一杯に広げてから、Constraints を上下左右に設定します。



    4. MapViewを1回クリックして選択してから、ウィンドウ下の Constraints の Pin をクリックして、上下左右のmerginを0にし、"Add 4 Constraints" ボタンをクリックします。


  4. Main.storyboard上の ViewController に、右下の "Object library" から "Tool Bar" をドラッグして MapKit に重ねて、下の方に配置します。 Toolbar上に最初から配置されている1個のItemの表示を"横浜"に変えましょう。



    5. 下左右のmerginを0にし、"Add 3 Constraints" ボタンをクリックします。




  5. Main.storyboard上の ViewController に、右下の "Object library" から "Segmeted Control" をドラッグして ToolBar に重ねて配置します。 セグメントの個数を4にし、順に "地図"、"写真"、"地図+写真", "3D"にします。 さらにSegmented Controllの両脇には "Flexible Space Bar Button" を置きます。






  6. Main.storyboardが表示されている状態で、 ウィンドウの右上の "Show the Assistant Editor" ボタン をクリックして、右側のウィンドウに ViewController.swift が表示されている 状態にします。
  7. Main.storyboard上の部品を ViewController.swift にConnectします。

    8. Main.storyboard上の部品を、それぞれまず1回クリックして選択してから、 右マウスボタン(またはControllキー+左マウスボタン)でドラッグして、 右側の画面のViewController.swift の 

    class ViewController: UIViewController {
    の下の行まで持っていきます。

    Viewのインスタンス Connectionの種類名前
    MapKit OutletmyMap
    Toolbar OutlettoolBar
    Toolbar上の"横浜"ItemActiongotoSpot
    Segmented Control Action (Value Changed)changeMapType



  8. ViewController.swift を変更します。
    9. ViewController.swiftに追加するコード(赤字部分)
    import UIKit
import MapKit

class ViewController: UIViewController {
    @IBOutlet weak var myMap: MKMapView!
    @IBOutlet weak var toolBar: UIToolbar!

    var defaultColor:UIColor!
    
    @IBAction func gotoSpot(sender: AnyObject) {
        let lat = 35.454954
        let lng = 139.6313859
        let center = CLLocationCoordinate2D(latitude: lat, longitude: lng)
        let span = MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)  // 1 degree means 111km
        let theRegion = MKCoordinateRegion(center:center, span:span)
        myMap.setRegion(theRegion,animated: true)
    }
 
    @IBAction func changeMapType(sender: AnyObject) {
        switch sender.selectedSegmentIndex {
        case 0:
            myMap.mapType = .Standard
            myMap.camera.pitch = 0.0
            toolBar.tintColor = defaultColor
            toolBar.alpha = 1.0
        case 1:
            myMap.mapType = .Satellite
            toolBar.tintColor = UIColor.whiteColor()
            toolBar.alpha = 0.8
        case 2:
            myMap.mapType = .Hybrid
            toolBar.tintColor = UIColor.whiteColor()
            toolBar.alpha = 0.8
        case 3:
            myMap.mapType = .Standard
            toolBar.tintColor = defaultColor
            toolBar.alpha = 1.0
            myMap.camera.pitch = 70
            myMap.camera.altitude = 1000
        default:
            break
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        defaultColor = toolBar.tintColor
        myMap.showsScale = true
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

}
  9. Xcodeを起動中にiOSデバイスを Mac に接続すると、 Xcode のstatusに "Processing symbol files" と表示されて、しばらく待つと 左上の実行デバイスに 接続したiOSデバイスの名前が表示される。 これを選択して実行する。
  10. アプリが起動すると日本地図が表示される。 「横浜」ボタンをクリックすると、横浜の詳細地図が表示される。 表示形式は Segmented Contorl で変更できる。


  11. サンプルのプロジェクトはこちら。(Xcode 7.3.1版)

http://karel.tsuda.ac.jp