Swift開發iOS — MapKit 地圖功能

在開發App過程中經常使用到地圖。除了Google Map 之外，ios 也提供建置地圖的方式 — MapKit。

接下來介紹 MapKit 使用方式：

• 地圖設定
• 顯示特定區域的地圖
• 在地圖上加上大頭針
• 長按加上大頭針
• 使用者目前位置
• 追蹤使用者位置

讓我們繼續看下去～～～

MapView 地圖設定

• Map Kit View 元件

1. 在storyboard 加入 MKMapView
2. ViewController 加入 “import MapKit” 匯入跟地圖相關的程式庫
3. 將 map 連結 ViewController “@IBOutlet weak var map: MKMapView!”

這樣就會顯示基本地圖了～

顯示特定區域的地圖

1. 找出特定位置的經緯度 (可以使用Google Map 查詢經緯度)

經緯度 CLLocationDegrees => 座標 CLLocationCoordinate2D

橫向縮放 CLLocationDegrees => 縮放範圍 MKCoordinateSpan

座標 CLLocationCoordinate2D ＋ 縮放範圍 MKCoordinateSpan => 顯示區域MKCoordinateRegion

2. “map.setRegion” 顯示區域

// 設定經緯度
let latitude:CLLocationDegrees = 25.033684
let longitude:CLLocationDegrees = 121.564882
// 經緯度變成座標
let location:CLLocationCoordinate2D = CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
// 設定直向、橫向縮放
let xScale:CLLocationDegrees = 0.002
let yScale:CLLocationDegrees = 0.002
// 設定縮放範圍
let span:MKCoordinateSpan = MKCoordinateSpan(latitudeDelta: xScale, longitudeDelta: yScale)
// 設定顯示區域
let region:MKCoordinateRegion = MKCoordinateRegion(center: location, span: span)
// 顯示區域地圖
map.setRegion(region, animated: true)

mapType 可以調整 地圖模式
map.mapType = .satellite (這樣地圖呈現為衛星模式)

全部分開寫是為了讓大家了解～
當然也是可以合併在一起
例如以下：

let region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 25.033684, longitude: 121.564882), latitudinalMeters: 200, longitudinalMeters: 200)

我顯示的位置是台北101啦～

在地圖上加上大頭針

// 釘大頭針
let annotation = MKPointAnnotation()  // 生出大頭針
annotation.coordinate = location      // 設定座標
annotation.title = "101"              // 設定標題
annotation.subtitle = "這是台北地標唷～" // 設定副標map.addAnnotation(annotation)         // 加到地圖上

點選大頭針會跑出副標題～

長按加上大頭針

1. 要偵測長按這個動作 — 在storyboard 加入 Long Press Gesture Recognizer

設定一根手指 以及 長按時間為兩秒

2. 連結 ViewController 程式碼如下

@IBAction func addAnnotation(_ sender: UILongPressGestureRecognizer){
     let touchPoint = sender.location(in: map)
     // touch的位置轉成座標
     let touch:CLLocationCoordinate2D = map.convert(touchPoint, toCoordinateFrom: map)
     // 釘大頭針
     let annotation = MKPointAnnotation() // 生出大頭針   
     annotation.coordinate = touch        // 設定座標     
     map.addAnnotation(annotation)        // 加到地圖上
}

使用者目前位置

1. ViewController 加入 “import CoreLocationt”
2. Info的加入隱私設定，使用App時詢問是否同意定位

var location: CLLocationManager?
override func viewDidLoad() {
super.viewDidLoad()
// 得知使用者位置
location = CLLocationManager()
location.requestWhenInUseAuthorization()
if let coordinate = location?.location?.coordinate{

let xScale:CLLocationDegrees = 0.001
let yScale:CLLocationDegrees = 0.001
let span:MKCoordinateSpan = MKCoordinateSpan(latitudeDelta: xScale, longitudeDelta: yScale)
let region:MKCoordinateRegion = MKCoordinateRegion(center: coordinate, span: span)
map.setRegion(region, animated: true)
}

注意～模擬器無法顯示現在定位位置喔～要用實體手機測試～

追蹤使用者目前位置

ViewController: 除了 繼承UIViewController 之外

再多服從一個 CLLocationManagerDelegate 的協定

override func viewDidLoad() {
super.viewDidLoad()
// 得知使用者位置
location = CLLocationManager()
location.requestWhenInUseAuthorization()
// 追蹤使用者位置
location?.delegate = self
location?.desiredAccuracy = kCLLocationAccuracyBest
location?.activityType = .automotiveNavigation
location?.startUpdatingLocation()
if let coordinate = location?.location?.coordinate{

    let xScale:CLLocationDegrees = 0.001
    let yScale:CLLocationDegrees = 0.001
    let span:MKCoordinateSpan = MKCoordinateSpan(latitudeDelta: xScale, longitudeDelta: yScale)
    let region:MKCoordinateRegion = MKCoordinateRegion(center: coordinate, span: span)
    map.setRegion(region, animated: true)
}
}
// 印出經緯度
func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
print("---------------------")
print(locations[0].coordinate.latitude)
print(locations[0].coordinate.longitude)
}

詳細可以看github連結：

anny86023/ios_map