iT 邦幫忙鐵人賽 Day 19: 在 App 中加入一張地圖吧 !
使用 iOS 中的 MapKit 來開發有關地圖的功能吧!
前言:
在我們開發應用時,常常也會碰到需要導入「地圖」功能的需求,像是顯示附近咖啡廳、個人目前位址或是導航功能,這些功能往往需要搭配一張地圖讓這個功能更加完善,讓使用者能夠透過地圖一目瞭然這些地理資訊。這次教學我們會大家一步一步在 App 中導入地圖功能。
實作地圖:
#顯示使用者當前位置:
首先我們希望我們可以獲得使用者的座標,所以我們一樣必須向使用者授權這項功能,而我們這個 App 只需要在前景時候才要取得,所以我們需要在 Info.plist 設定:Privacy — Location When In Use Usage Description
,如果你需要前景跟背景都需要取得座標,那麼就設定:Privacy — Location Always Usage Description
。
接著我們到我們的地圖的 Storyboard 底下加入一個 Map Kit View:
接下來別忘了 import MapKit
才能繼續開發我們地圖相關的功能,接著我們點選 MapKit 元件的屬性面板勾選 User Location :
設定完之後,我們需要再程式碼導入 CoreLocation
來讓 MapKitView 取得使用者目前的所在位置,如果你不需要顯示使用者當前位置,那麼就不需要導入。
let locationManager = CLLocationManager()
// 詢問使用者是否取得當前位置的授權
locationManger.requestWhenInUseAuthorization()
接著我們打開 App 看看是否能夠在 App 上顯示顯示目前位置吧!
#在地圖上加入一個大頭針
接著我希望我們能夠在「好想工作室」這個位置加上一個大頭針,告訴使用者好想工作室的位置,這邊我們會使用 MKPointAnnotation 來實作大頭針,並且標示好想工作室的座標位置。
let studioAnnotation = MKPointAnnotation()
// 設定大頭針座標
studioAnnotation.coordinate = CLLocationCoordinate2D(latitude: 22.999613, longitude: 120.212775)
// 將大頭針的座標位置設為我們的地圖的中心點
mapView.setCenter(studioAnnotation.coordinate, animated: true)
// 將大頭針加入 mapView 中
mapView.addAnnotation(studioAnnotation)
# 加入標題以及縮放比例尺
接著因為他在地圖上顯示的太小了,所以我們必須將地圖放大來看,而且我們希望我們可以為這個大頭針加上標題以及說明,因此我們設置大頭針的完整程式碼如下:
如此一來就可以看到我們的大頭針的標題以及副標題內容:
後記:
MapKit 是一個功能強大的框架,我們在許多應用都會需要到他,希望透過這次教學大家能夠學會如何基本的使用地圖應用,之後的教學會加入更多地圖上的功能分享給大家學習,我們下次教學見。後記:
MapKit 是一個功能強大的框架,我們在許多應用都會需要到他,希望透過這次教學大家能夠學會如何基本的使用地圖應用,之後的教學會加入更多地圖上的功能分享給大家學習,我們下次教學見。