iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 19
0
自我挑戰組

一天一蘋果,Bug 遠離我。系列 第 19

Day 19: 在 App 中加入一張地圖吧 !

使用 iOS 中的 MapKit 來開發有關地圖的功能吧!
https://ithelp.ithome.com.tw/upload/images/20181103/20107701qo4lgDTZFm.jpg
試著在你的 App 中加入一個地圖應用吧!

前言:

在我們開發應用時,常常也會碰到需要導入「地圖」功能的需求,像是顯示附近咖啡廳、個人目前位址或是導航功能,這些功能往往需要搭配一張地圖讓這個功能更加完善,讓使用者能夠透過地圖一目瞭然這些地理資訊。這次教學我們會大家一步一步在 App 中導入地圖功能。

實作地圖:

#顯示使用者當前位置:

首先我們希望我們可以獲得使用者的座標,所以我們一樣必須向使用者授權這項功能,而我們這個 App 只需要在前景時候才要取得,所以我們需要在 Info.plist 設定:Privacy - Location When In Use Usage Description,如果你需要前景跟背景都需要取得座標,那麼就設定:Privacy - Location Always Usage Description
接著我們到我們的地圖的 Storyboard 底下加入一個 Map Kit View:

https://ithelp.ithome.com.tw/upload/images/20181103/201077019eUWbOkf1T.png

接下來別忘了 import MapKit 才能繼續開發我們地圖相關的功能,接著我們點選 MapKit 元件的屬性面板勾選 User Location

https://ithelp.ithome.com.tw/upload/images/20181103/20107701lVMwwBA4mz.png

設定完之後,我們需要再程式碼導入 CoreLocation 來讓 MapKitView 取得使用者目前的所在位置,如果你不需要顯示使用者當前位置,那麼就不需要導入。

let locationManager = CLLocationManager()
// 詢問使用者是否取得當前位置的授權
locationManger.requestWhenInUseAuthorization()

接著我們打開 App 看看是否能夠在 App 上顯示顯示目前位置吧!

https://ithelp.ithome.com.tw/upload/images/20181103/201077019SKdyi7H5D.png

需要使用允許取用位置資訊顯示使用者的當前位置

https://ithelp.ithome.com.tw/upload/images/20181103/20107701y7uXM55e8b.jpg

#在地圖上加入一個大頭針

接著我希望我們能夠在「好想工作室」這個位置加上一個大頭針,告訴使用者好想工作室的位置,這邊我們會使用 MKPointAnnotation 來實作大頭針,並且標示好想工作室的座標位置。

let studioAnnotation = MKPointAnnotation()
// 設定大頭針座標
studioAnnotation.coordinate = CLLocationCoordinate2D(latitude: 22.999613, longitude: 120.212775)
// 將大頭針的座標位置設為我們的地圖的中心點
mapView.setCenter(studioAnnotation.coordinate, animated: true)
// 將大頭針加入 mapView 中
mapView.addAnnotation(studioAnnotation)

https://ithelp.ithome.com.tw/upload/images/20181103/20107701NIZhXmD9YE.png

在地圖中加入大頭針

# 加入標題以及縮放比例尺

接著因為他在地圖上顯示的太小了,所以我們必須將地圖放大來看,而且我們希望我們可以為這個大頭針加上標題以及說明,因此我們設置大頭針的完整程式碼如下:

func settingStudioAnnotation() {
    let studioAnnotation = MKPointAnnotation()
    studioAnnotation.coordinate = CLLocationCoordinate2D(latitude: 22.999613, longitude: 120.212775)
    // 設置大頭針標題
    studioAnnotation.title = "好想工作室"
    // 設置大頭針副標題,需點選才能看見
    studioAnnotation.subtitle = "北門路二段16號 L2A, 東區台南市701"
    mapView.setCenter(studioAnnotation.coordinate, animated: true)
    // 更改當前可見區域,並且根據指定的坐標和距離值創建新的MKCoordinateRegion。
    mapView.setRegion(MKCoordinateRegion(center: studioAnnotation.coordinate, latitudinalMeters: 100, longitudinalMeters: 100), animated: true)
    mapView.addAnnotation(studioAnnotation)
}

如此一來就可以看到我們的大頭針的標題以及副標題內容:

https://ithelp.ithome.com.tw/upload/images/20181103/20107701dSiM4KfNSJ.png

好想工作室位置圖


後記:

MapKit 是一個功能強大的框架,我們在許多應用都會需要到他,希望透過這次教學大家能夠學會如何基本的使用地圖應用,之後的教學會加入更多地圖上的功能分享給大家學習,我們下次教學見。後記:

MapKit 是一個功能強大的框架,我們在許多應用都會需要到他,希望透過這次教學大家能夠學會如何基本的使用地圖應用,之後的教學會加入更多地圖上的功能分享給大家學習,我們下次教學見。


上一篇
Day 18: 在 App 中開啟一個 Safari 瀏覽器吧!
下一篇
Day 20: 設定一個 Callout 面板!
系列文
一天一蘋果,Bug 遠離我。30

尚未有邦友留言

立即登入留言