Swift Practice # 170 SwiftUI Map多地點顯示與Span大小

Dogpa Chen
Aug 18, 2022

--

上一篇透過SPM加入範圍的Slider,玩成了區間飯為設定的公能與過率搜尋。

這篇要研究side project的一個小功能,原本沒有要納入,但突然發現使用者可能會需要這樣的顯示狀況。

主要研究的是MapKit內的Map

在iOS14內新加入的功能,在之前的練習也有曾經使用過。

之前的練習在於說取得使用者的位置透過使用者的位置當作Map的中心點並設定跨度(Span)來當作顯示的比例尺。在使用Google或是一些地圖相關的App都能看到這樣的設定。

基本上地圖的顯示一定要有中心點與跨度,而這個需要透過MKCoordinateRegion來完成。

Span就是上面有提到的跨度,而跨度到底該設定多少就成為我想研究的一個方向。首先我先嘗試取得台灣本島東西南北四極點的位置,在透過東西向差距的一半與南北向差距的一半取得中心點來顯示。

左ipod touch 右i13 Pro

從上述的程式碼可以看到從iPod touch 與i13Pro中都能夠顯示完整台灣地圖,但可以看到一點是左側的iPod touch東西向完全貼合螢幕而i13Pro則是南北向完全貼合螢幕。目前對於這樣的差別我判斷有兩個可能性

其一為兩者的螢幕比例不同,所以顯示出來的樣貌會有差異。

其二是緯度在赤道以及不同地方所代表的實際距離不同,赤道的緯度一度約111公里,而到北回歸線時緯度一度剩101公里左右。

以上這兩點是可能的因素,但在這邊暫不細談,但自己認為跟螢幕比例有較大的關係。

得知了Map的基礎使用後,就來到了關鍵的問題,也就是我想要再一個以上地點同時讓他們顯示在Map裡面該如何做到?通常一個地點,只要取得該地點的經緯度即可,但是兩個以上我們該如何完成?一開始突然沒有想法,但是透過上面顯示台灣地圖的方式讓我有了一道曙光,而我的作法跟上面一樣,就是取得想要顯示的所有地點並且取得這些地點的四個極點,並透過東西向與南北向差距計算出顯示的中心點以及該顯示的跨度。大致上的思路出來開始嘗試透過程式碼實踐。

Model:

ViewModel:

ViewModel內的getRandomArray請原諒把過多的東西塞在一個function內,但透過這個function來重新取得顯示的中心以及跨度(Span)。

View:

透過View來顯示指定的範圍的地點,並且透過Button重新改變顯示的中心與跨度。

上面的Gif可以看到重新取得隨機的顯示範圍後新的Array內的地點都能夠完整顯示在地圖Map內,如果Map上還有其他元件要一起顯示可能就要重新調整跨度與顯示的中心位置。大致上就是這次想跟大家分享的內容。持續加油!!

--

--