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" ボタンをクリックします。


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



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




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






  8. Main.storyboardが表示されている状態で、 ウィンドウの右上の "Show the Assistant Editor" ボタン をクリックして、右側のウィンドウに ViewController.swift が表示されている 状態にします。
  9. Main.storyboard上の部品を ViewController.swift にConnectします。
  10. Main.storyboard上の部品を、それぞれまず1回クリックして選択してから、 右マウスボタン(またはControllキー+左マウスボタン)でドラッグして、 右側の画面のViewController.swift の

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

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



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


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


http://karel.tsuda.ac.jp