再接再勵學 Swift 程式設計地圖、導航之程式運用

學習主題• 學習程式的歷程• 自我介紹與哈啦• 功力複習• 程式實作 (Swift)

• 問題與交流

個人簡介諸葛魔斌工作室：諸葛魔斌科技創作室學歷：高應大 --- 工管系 ( 非資訊科系 )E-Mail ： chugermobin@gmail.com官方網站： http://twcts.comFacebook ： https://goo.gl/volM7Z粉絲團 ： https://goo.gl/LI08wh社群 ： https://goo.gl/kjCsz1Line (id) ： http://goo.gl/ayGW7dLine@ ： http://goo.gl/pQHjWHLine Bot ： http://goo.gl/ljdxfVPlay 商店： http://goo.gl/CkVdsdApp Store ： http://apple.co/1Qehd64專長： VB(VBA) 、 C# 、 Java(Android) 、 Swift(iOS) 、 PHP 、 Python 、 Conrona 、 Golang 、 HTML/CSS 、 MySQL 、 FreeBSD 、 Server 架設、 CAD 、 ……

楊政斌

學習程式的歷程學生時期：打電動，沒有日夜的界限二專畢業：初次接觸 dBase 、 Lotus 使用 Clipper 做經銷存、應收付帳系統

工作階段 1 ：接觸 Office ，開始使用 Excel(Lotus)

工作階段 2 ：品保工作，自學圖表、函數、 VBA ，做出自動化品管系統興趣展開：自學 VB ，製作 ERP 系統，接觸 Linux 、 FreeBSD ，自學架設 Server

諸葛魔斌誕生

大學時期：半自學 Android App(Java) 、 C# 、 iOS App(Swift)

工作轉變：成立諸葛魔斌科技創作室，接案學習，救國團電腦資訊講師實績：

地圖、導航之程式運用

Xcode ： 安裝約 30 ～ 50 min.

Swift 基本需求： Mac (Mac mini 、 MacBook) ，黑蘋果 iPhone 或 iPad ( 非強烈需要 )

憑證鑰匙： 安裝約 3 ～ 5 min. ( 上架 App Store 需要 )

憑證鑰匙安裝與設定

憑證鑰匙安裝與設定

輸入申請開發者帳號的 email ，並選取 " 儲存到磁碟 " 後選取繼續

憑證鑰匙安裝與設定

將檔案存於 " 桌面 " ，檔名為預設的CertificateSigningRequest.certSigningRequest 即可 ( 注意，此檔可以保存，以作為後續建立生產 Prodution 所需的 Provisioning 使用 )

憑證鑰匙安裝與設定

憑證鑰匙安裝與設定

憑證鑰匙安裝與設定登入開發者後台 https://developer.apple.com/，並選取右上方的 "Member Center"

憑證鑰匙安裝與設定

選 "Certificates, Identifiers & Profiles"

憑證鑰匙安裝與設定

憑證鑰匙安裝與設定

憑證鑰匙安裝與設定

於 Certificates 中，按左上角的 "+" 按鈕後，選取 "iOS App Development" 以製作開發用的憑證

憑證鑰匙安裝與設定

憑證鑰匙安裝與設定

憑證鑰匙安裝與設定

此時會用到鑰匙圈存取所產生的馮證檔 "CertificateSigningRequest.certSigningRequest" ，選 "Choose File" 上此 "CertificateSigningRequest.certSigningRequest" 上傳，接著按 "Generate" 產生開發用的憑證檔

憑證鑰匙安裝與設定

點選 "Download" 下載後此憑證檔

憑證鑰匙安裝與設定

安裝開發者憑證 & 發佈憑證

憑證鑰匙安裝與設定

憑證鑰匙安裝與設定WWDR 憑證：WWDR 即為 Worldwide Developer Relations Certificate Authority 憑證，所以開發人員皆需要安裝此憑證，只是此憑證不需刻意裝的原因是，在您安裝 XCode 即會安裝此憑證，當然，您也可以重新下載此憑證安裝。此憑證您可在於開發者網站，建立憑證的第一頁下方找到

地圖、導航之程式運用

GPS 經、緯度資料讀取

地圖、導航之程式運用

遊樂場，練習 Swift 語法的地方

建立新專案 ( 程式 )

開啟已存在專案 ( 程式 )

開啟其他專案 ( 程式 )

地圖、導航之程式運用

專案模板選擇

地圖、導航之程式運用專案 ( 程式 ) 名稱組織 ( 創作者 ) 名稱組織識別 ( 網域 )專案 ( 程式 ) 包識別唯一、上架用

程式語言Objective-C 或

Swift

應用的設備手機、平板、通用

暫不勾選

地圖、導航之程式運用

選擇存放資料夾

地圖、導航之程式運用專案包識別碼

版本修訂版次

開發者 ( 團隊 )選擇模擬器

地圖、導航之程式運用代理、協定

導覽區

程式控制佈局頁面

資源

編輯區設定區

地圖、導航之程式運用

導覽區 編輯區設定區

地圖、導航之程式運用

Label放置到佈局適當位置

地圖、導航之程式運用Label 物件宣告

動作程式

位置管理代理引入套件庫

地圖、導航之程式運用

動作程式

地圖、導航之程式運用import UIKitimport CoreLocation  class ViewController: UIViewController, CLLocationManagerDelegate { @IBOutlet weak var lblLat: UILabel! @IBOutlet weak var lblLon: UILabel! @IBOutlet weak var lblHorizontal: UILabel! @IBOutlet weak var lblAltitude: UILabel! @IBOutlet weak var lblVertical: UILabel! @IBOutlet weak var lblDistance: UILabel! var locationManager: CLLocationManager = CLLocationManager() // 取得手機所處地理相關的資訊，包含所在座標 var startLocation: CLLocation! //CLLocationManagerDelegate ，定義了處理 CLLocationManager 的委外工作，以處理接收地理資訊後的工作 //CLLocationManager ：取得資訊後，在委派給實作 CLLocationManagerDelegate 的物件，以處理取得地理資訊後的工作。  override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. locationManager.desiredAccuracy = kCLLocationAccuracyBest locationManager.delegate = self locationManager.requestWhenInUseAuthorization() locationManager.startUpdatingLocation() startLocation = CLLocation(latitude: 22.6138519, longitude: 120.3024543) // 目標緯度經度 }  override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. }

地圖、導航之程式運用 func locationManager(manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) { // 定位資訊 let latestLocation: AnyObject = locations[locations.count - 1] lblLat.text = String(format: "%.4f", latestLocation.coordinate.latitude) // 緯度 lblLon.text = String(format: "%.4f", latestLocation.coordinate.longitude) // 經度 lblHorizontal.text = String(format: "%.4f", latestLocation.horizontalAccuracy) // 水平精度 lblAltitude.text = String(format: "%.4f", latestLocation.altitude) // 海拔高度 lblVertical.text = String(format: "%.4f", latestLocation.verticalAccuracy) // 垂直精度 let distanceBetween: CLLocationDistance = latestLocation.distanceFromLocation(startLocation) // 計算 startLocation 與 latestLocation距離 lblDistance.text = String(format: "%.2f", distanceBetween) //距離 公尺 } func locationManager(manager: CLLocationManager, didFailWithError error: NSError) { }}

地圖、導航之程式運用

GPS 權限開放需求

地圖、導航之程式運用

執行模擬器

地圖、導航之程式運用

地圖顯示所在位置

地圖、導航之程式運用專案 ( 程式 ) 名稱組織 ( 創作者 ) 名稱組織識別 ( 網域 )專案 ( 程式 ) 包識別唯一、上架用

程式語言Objective-C 或

Swift

應用的設備手機、平板、通用

暫不勾選

地圖、導航之程式運用

選擇 MapView拉到原視圖右邊空白處

地圖、導航之程式運用

填入物件宣告

地圖、導航之程式運用

勾選 User Location ，在地圖顯示所在位置

地圖、導航之程式運用MapView 物件宣告Location 變數宣告

動作程式

引入套件庫

地圖、導航之程式運用import UIKitimport MapKit class ViewController: UIViewController { @IBOutlet weak var uimap: MKMapView! var location : CLLocationManager!; // 座標管理元件 override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib. location = CLLocationManager(); //詢問使用者是否同意給 APP 定位功能 location.requestWhenInUseAuthorization(); // 開始接收目前位置資訊 location.startUpdatingLocation(); } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. }

地圖、導航之程式運用 override func viewDidDisappear(animated: Bool) { // 因為ＧＰＳ功能很耗電 , 所以被敬執行時關閉定位功能 location.stopUpdatingLocation(); } func locationManager(manager: CLLocationManager!, didUpdateLocations locations: [AnyObject]!) { // 取得目前的座標位置 let c = locations[0] as! CLLocation; //c.coordinate.latitude 目前緯度 //c.coordinate.longitude 目前經度 let nowLocation = CLLocationCoordinate2D(latitude: c.coordinate.latitude, longitude: c.coordinate.longitude); // 將 map 中心點定在目前所在的位置 //span 是地圖 zoom in, zoom out 的級距 let _span:MKCoordinateSpan = MKCoordinateSpan(latitudeDelta: 0.0005, longitudeDelta: 0.0005); self.uimap.setRegion(MKCoordinateRegion(center: nowLocation, span: _span), animated: true); }}

地圖、導航之程式運用

執行模擬器

地圖、導航之程式運用

搜尋地點 &繪出導航線

地圖、導航之程式運用專案 ( 程式 ) 名稱組織 ( 創作者 ) 名稱組織識別 ( 網域 )專案 ( 程式 ) 包識別唯一、上架用

程式語言Objective-C 或

Swift

應用的設備手機、平板、通用

暫不勾選

地圖、導航之程式運用

拉入 SeachBar, Label, MapView元件

地圖、導航之程式運用填入物件宣告，並建立連結

SearchBar, Map, 地點位置代理

地圖、導航之程式運用SearchBar 將地點轉成地圖位址

繪製地圖

導航線屬性

地圖、導航之程式運用繪製導航線

地圖、導航之程式運用

計算距離和時間

地圖、導航之程式運用import UIKitimport MapKit class ViewController: UIViewController, UISearchBarDelegate, MKMapViewDelegate, CLLocationManagerDelegate { @IBOutlet weak var ssearchbar: UISearchBar! @IBOutlet weak var mapview: MKMapView! @IBOutlet weak var distanceLabel: UILabel! @IBOutlet weak var timeLabel: UILabel! var locationManager: CLLocationManager! // 位置權限、自動更新定位開啟 / 關閉 ... var dest: CLLocationCoordinate2D? // 目前導航目標 var drawing: Bool = false //避免多個繪圖動作同時運行 var overlay: MKPolyline? // 目前導航路線所在的 Overlay //var handler: (([CLPlacemark]?, NSError) -> Void)? override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib.

地圖、導航之程式運用 locationManager = CLLocationManager() locationManager.delegate = self locationManager.desiredAccuracy = kCLLocationAccuracyBest // 精確度 //or locationManager.requestWhenInUseAuthorization() locationManager.requestAlwaysAuthorization() // 要求抓取位置的權限 locationManager.startUpdatingLocation() // 開始取得定位 //locationManager.distanceFilter = 10 // 設定 mapview 和 searchbar ssearchbar.delegate = self mapview.delegate = self mapview.showsUserLocation = true //顯示自己的位置 (藍色點點 ) }  override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. }

地圖、導航之程式運用 func searchBarSearchButtonClicked(searchBar: UISearchBar) { CLGeocoder().geocodeAddressString(searchBar.text!) { (placemarks, error) in if let coordinate = placemarks?.first?.location?.coordinate { self.dest = coordinate searchBar.resignFirstResponder() //隱藏鍵盤 self.drawRoute() } }  } func mapView(mapView: MKMapView, didUpdateUserLocation userLocation: MKUserLocation) { print(userLocation.coordinate) // 設置地圖中心位置 mapview.setCenterCoordinate(userLocation.coordinate, animated: true) // 可視範圍 (單位 :公尺 ) let viewRegion = MKCoordinateRegionMakeWithDistance(userLocation.coordinate, 500, 500) mapview.setRegion(viewRegion, animated: true) drawRoute() }

地圖、導航之程式運用 func mapView(mapView: MKMapView, rendererForOverlay overlay: MKOverlay) -> MKOverlayRenderer { let render = MKPolylineRenderer(polyline: self.overlay!) render.strokeColor = UIColor (red: 0.9861, green: 0.2939, blue:0.1098, alpha: 1.0) render.lineWidth = 3 return render }  func drawRoute() { if (drawing) { return //已經在畫了等等再來 >.= } guard let dest = self.dest else { return //還沒設定目的地 ...滾 !! } drawing = true // 開始畫了

地圖、導航之程式運用 let req = MKDirectionsRequest() req.transportType = .Automobile // 設定交通類型 //從哪裡出發 req.source = MKMapItem(placemark: MKPlacemark(coordinate: mapview.userLocation.coordinate, addressDictionary: nil)) // 要去哪裡 req.destination = MKMapItem(placemark: MKPlacemark(coordinate: dest, addressDictionary: nil)) let directions = MKDirections(request: req) // 計算路徑中 ... directions.calculateDirectionsWithCompletionHandler { (res, error) in if let route = res?.routes.first { //如果 overlay 已經存在要先移除 if let ol = self.overlay { self.mapview.removeOverlay(ol) } // 儲存新的 overlay self.overlay = route.polyline self.mapview.addOverlay(route.polyline)

地圖、導航之程式運用 //更新文字部分 self.distanceLabel.text = "估計距離： \(route.distance/1000)km" //self.timeLabel.text = "估計時間： \(route.expectedTravelTime/3600)hr" self.timeLabel.text = "估計時間： \(route.expectedTravelTime/60)min" } self.drawing = false //畫完了 } }}

地圖、導航之程式運用

勾選 User Location ，在地圖顯示所在位置

地圖、導航之程式運用

GPS 權限開放需求

地圖、導航之程式運用

執行模擬器

地圖、導航之程式運用

組合 GPS 資訊到導航地圖

地圖、導航之程式運用

調整 MapView

放入 6 個Ｌ日月水中

地圖、導航之程式運用

填入物件宣告，並建立連結

地圖、導航之程式運用

讀取 GPS 資料

地圖、導航之程式運用import UIKitimport MapKit class ViewController: UIViewController, UISearchBarDelegate, MKMapViewDelegate, CLLocationManagerDelegate { @IBOutlet weak var ssearchbar: UISearchBar! @IBOutlet weak var mapview: MKMapView! @IBOutlet weak var distanceLabel: UILabel! @IBOutlet weak var timeLabel: UILabel! @IBOutlet weak var lblLat: UILabel! @IBOutlet weak var lblLon: UILabel! @IBOutlet weak var lblHorizontal: UILabel! @IBOutlet weak var lblAltitude: UILabel! @IBOutlet weak var lblVertical: UILabel! @IBOutlet weak var lblDistance: UILabel! var locationManager: CLLocationManager! // 位置權限、自動更新定位開啟 / 關閉 ... var dest: CLLocationCoordinate2D? // 目前導航目標 var drawing: Bool = false //避免多個繪圖動作同時運行 var overlay: MKPolyline? // 目前導航路線所在的 Overlay

地圖、導航之程式運用 override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view, typically from a nib.

locationManager = CLLocationManager() locationManager.delegate = self locationManager.desiredAccuracy = kCLLocationAccuracyBest // 精確度 //or locationManager.requestWhenInUseAuthorization() locationManager.requestAlwaysAuthorization() // 要求抓取位置的權限 locationManager.startUpdatingLocation() // 開始取得定位 //locationManager.distanceFilter = 10 // 設定 mapview 和 searchbar ssearchbar.delegate = self mapview.delegate = self mapview.showsUserLocation = true //顯示自己的位置 (藍色點點 ) }

地圖、導航之程式運用 override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. }

func searchBarSearchButtonClicked(searchBar: UISearchBar) { CLGeocoder().geocodeAddressString(searchBar.text!) { (placemarks, error) in if let coordinate = placemarks?.first?.location?.coordinate { self.dest = coordinate searchBar.resignFirstResponder() //隱藏鍵盤 self.drawRoute() } }  }

地圖、導航之程式運用 func mapView(mapView: MKMapView, didUpdateUserLocation userLocation: MKUserLocation) { print(userLocation.coordinate) // 設置地圖中心位置 mapview.setCenterCoordinate(userLocation.coordinate, animated: true) // 可視範圍 (單位 :公尺 ) let viewRegion = MKCoordinateRegionMakeWithDistance(userLocation.coordinate, 500, 500) mapview.setRegion(viewRegion, animated: true) drawRoute() }

func mapView(mapView: MKMapView, rendererForOverlay overlay: MKOverlay) -> MKOverlayRenderer { let render = MKPolylineRenderer(polyline: self.overlay!) render.strokeColor = UIColor (red: 0.9861, green: 0.2939, blue:0.1098, alpha: 1.0) render.lineWidth = 3 return render }

地圖、導航之程式運用 func drawRoute() { if (drawing) { return //已經在畫了等等再來 >.= } guard let dest = self.dest else { return //還沒設定目的地 ...滾 !! } drawing = true // 開始畫了 let req = MKDirectionsRequest() req.transportType = .Automobile // 設定交通類型 //從哪裡出發 req.source = MKMapItem(placemark: MKPlacemark(coordinate: mapview.userLocation.coordinate, addressDictionary: nil)) // 要去哪裡 req.destination = MKMapItem(placemark: MKPlacemark(coordinate: dest, addressDictionary: nil)) let directions = MKDirections(request: req)

地圖、導航之程式運用 // 計算路徑中 ... directions.calculateDirectionsWithCompletionHandler { (res, error) in if let route = res?.routes.first { //如果 overlay 已經存在要先移除 if let ol = self.overlay { self.mapview.removeOverlay(ol) } // 儲存新的 overlay self.overlay = route.polyline self.mapview.addOverlay(route.polyline)

//更新文字部分 self.distanceLabel.text = "估計距離： \(route.distance/1000)km" //self.timeLabel.text = "估計時間： \(route.expectedTravelTime/3600)hr" self.timeLabel.text = "估計時間： \(route.expectedTravelTime/60)min" } self.drawing = false //畫完了 } }

地圖、導航之程式運用 func locationManager(manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) { // 定位資訊 let latestLocation: AnyObject = locations[locations.count - 1] lblLat.text = " 緯度： " + String(format: "%.4f", latestLocation.coordinate.latitude) // 緯度 lblLon.text = " 經度： " + String(format: "%.4f", latestLocation.coordinate.longitude) // 經度 lblHorizontal.text = " 水平精度： " + String(format: "%.4f", latestLocation.horizontalAccuracy) // 水平精度 lblAltitude.text = " 海拔高度： " + String(format: "%.4f", latestLocation.altitude) // 海拔高度 lblVertical.text = " 垂直精度： " + String(format: "%.4f", latestLocation.verticalAccuracy) // 垂直精度 lblDistance.text = self.distanceLabel.text // 距離 公尺 } func locationManager(manager: CLLocationManager, didFailWithError error: NSError) { }}

地圖、導航之程式運用

執行模擬器

地圖、導航之程式運用結論： 1. 地圖套件引入

2. 元件 ( 物件 ) 、變數 (常數 )必先宣告3. 元件 ( 物件 ) 、變數 (常數 )命名規則 駝峰式

6. 學習階段，務必一字一字『抄』，切勿『複製貼上』7. 大膽嘗試，好奇無罪8. 不怕失敗，學習除錯9. 勇於分享

4. 權限設定5. 地圖設定

再接再勵學 Swift 程式設計

第四、五次聚會學習課程Android App 入門第一步iOS Swift 接力使力之玩 Open Data

學習不能中斷，卡關不要氣餒，讓我們的熱血繼續揮撒在程式的樂趣吧 !!帶著你的筆電，和我們一起享受 Coding Fun註：我們學習的是多系統，所以筆電最好是 Macbook哦 !日期： 8/10(星期三 ) 18:30 ～ 21:30 Android App 入門第一步 8/17(星期三 ) 18:30 ～ 21:30 iOS Swift 接力使力之玩 Open Data地點：高雄市前鎮區一心二路 157 號 10樓之 4（微盛科技）捷運三多商圈站 4 號出口，步行約 10分鐘歡迎踴躍報名，也歡迎高手協助指導費用： 0元 (珍惜學習資源 )

地圖、導航之程式運用駝峰式命名法在命名常數、變數、函式、類別或其他自定義型別時，通常習慣使用駝峰式命名法。這種命名方式是一種習慣，沒有絕對與強制，為的是增加識別與可讀性。當自定義名稱是由二個或多個單字連結在一起，而構成的唯一識別字時，單字之間不以空格、連結號 (-) 或底線(_)隔開，有兩種格式：小駝峰式命名法 (lower camel case)

第一個單字以小寫字母開始，第二個及之後的單字的首字母則使用大寫，像是： firstName 、 somePerson 。程式 (Coding) 中通常命名物件、常數、變數、函式、屬性、方法及下標時，會使用小駝峰式命名法。大駝峰式命名法 (upper camel case)

每個單字的首字母都使用大寫字母，像是 LastName 、 SomeClass 。程式 (Coding) 中通常命名專案、列舉、結構、類別、擴展、協定及其他自定義型別時，會使用大駝峰式命名法。