iOS SDK 顯示地圖 & 地圖標記的方法

開發 iOS App 時，我們可以利用 MKMapView 顯示地圖，接下來我們就從 Xcode 的 playground 練習，學習使用 MKMapView 顯示地圖 & 加入英國倫敦有趣景點的地圖標記吧。

查詢地點的經緯度

我們希望在地圖的中心點顯示英國的大笨鐘，因此我們需要在程式裡輸入它的經緯度。別擔心，透過 Apple Map，我們可以輕易取得位置的經緯度，方法如下:

利用 Mac 的 Maps App 查詢經緯度的兩個方法

從 Apple Map 查詢的 Big Ben 經緯度是 51.500687, -0.124561。

利用 MKMapView 顯示地圖，設定顯示的內容範圍

import MapKit
import PlaygroundSupport

let mapView = MKMapView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
mapView.region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.500936, longitude: -0.124636), latitudinalMeters: 1000, longitudinalMeters: 1000)
PlaygroundPage.current.liveView = mapView

結果

說明

import MapKit
import PlaygroundSupport

為了使用顯示地圖的 MKMapView，我們必須加入 framework MapKit。另外為了在 playground 看到地圖，我們須透過 PlaygroundPage 的 liveView，因此我們也要 import PlaygroundSupport。

mapView.region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.500936, longitude: -0.124636), latitudinalMeters: 1000, longitudinalMeters: 1000)

MKMapView 的 region(區域) 控制地圖中心點的經緯度和範圍，它的型別為 MKCoordinateRegion。生成 MKCoordinateRegion 時，我們傳入以下三個參數:

• center: 型別 CLLocationCoordinate2D，代表地圖中心點的經緯度座標。latitude 是緯度，longitude 是經度。
• latitudinalMeters: 緯度範圍，單位是公尺，因此我們傳入 1000 表示地圖的最北邊 & 最南邊距離 1000 公尺
• longitudinalMeters: 經度範圍，單位是公尺，因此我們傳入 1000 表示地圖的最東邊 & 最西邊距離 1000 公尺。

init(center:latitudinalMeters:longitudinalMeters:) | Apple Developer Documentation

利用 MKPointAnnotation 加入地圖標記

在地圖上加入大笨鐘 & 倫敦眼的標記。

let bigBenAnnotation = MKPointAnnotation()
bigBenAnnotation.title = "大笨鐘"
bigBenAnnotation.coordinate = CLLocationCoordinate2D(latitude: 51.500936, longitude: -0.124636)
bigBenAnnotation.subtitle = "很笨的時鐘"
mapView.addAnnotation(bigBenAnnotation)
let londonEyeAnnotation = MKPointAnnotation()
londonEyeAnnotation.title = "倫敦眼"
londonEyeAnnotation.coordinate = CLLocationCoordinate2D(latitude: 51.503544, longitude: -0.119489)
londonEyeAnnotation.subtitle = "倫敦的眼精"
mapView.addAnnotation(londonEyeAnnotation)

結果

點選紅色標記時，它還會可愛地放大並顯示副標題。

說明

利用 MKPointAnnotation 產生地圖標記，透過它的 coordinate 設定經緯度座標，title & subtitle 設定標題 & 副標題。

ps: 已了解 array 的同學，也可以將 annotation 裝在 array 裡，然後從地圖呼叫 function addAnnotations 加入多個標記。

let annotations = [bigBenAnnotation, londonEyeAnnotation]
mapView.addAnnotations(annotations)

縮放地圖手勢

模擬器和 playground 的縮放手勢 — 按住 shift 鍵拖曳

設定地圖樣式

地圖預設顯示的樣式是標準(standard)樣式，我們可以設定 MKMapView 的 property mapType 調整樣式。

如下圖所示，設定 mapType 時我們可以輸入 . ，然後從選單裡選擇樣式。(ps:可以這樣輸入的原因跟 MKMapView 是由 enum 定義有關，對於 enum 還不了解的同學可以先學習輸入的方法，之後會介紹。)

比方以下例子

• 衛星空照圖

mapView.mapType = .satellite

• 衛星空照結合地圖。

mapView.mapType = .hybrid

• satelliteFlyover 樣式。

mapView.mapType = .satelliteFlyover

地圖顯示的 points of interest

MKMapView 的 pointOfInterestFilter 控制地圖顯示的 points of interest(地標、景點)，它的型別為 MKPointOfInterestFilter。比方以下例子我們產生 MKPointOfInterestFilter，在它的參數 including 傳入想顯示的地標類型的 array，大學跟咖啡廳。

let mapView = MKMapView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
mapView.region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 52.205472, longitude:  0.117039), latitudinalMeters: 500, longitudinalMeters: 500)
mapView.pointOfInterestFilter = MKPointOfInterestFilter(including: [.university, .cafe])

ps: 地圖 region 的範圍太大時可能會看不到 points of interest，可將 region 的範圍調小試試。

結果

地圖的語言

playground 的地圖語言跟地區有關，比方英國會顯示英文，台灣會顯示中文。