尋找餐廳 (FindRestaurant Support Page)

SWIFT

由於這個APP前陣子當成了homework所以這篇就當part 2.

由於上次說搜尋鄰近餐廳列表是寫死位置的, 因此這次的進度主要是Focus在地圖相關的功能 .

在使用定位功能前, 相關的權限要求提示NSLocationWhenInUseUsageDescription 或 NSLocationAlwaysUsageDescription 要加入.plist 否則會有問題.

(1.) 第一次開啟APP實是使用了CLLocationManager來檢查使用者當前位置, 因此在打API取餐廳列表之前會先使用CLLocationManager的startUpdatingLocation進行取得位置的部分 , 並在callback的地方

locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation])

取得位置後再開始帶入經緯度打API取餐廳列表.

(2.) 而位置選擇的按鈕本來想放成ButtonBarItem, 但首頁是用large title, 因此改以float menu button來選擇功能. 使用了Floaty這套第三方套件並做小幅度的更動修改顯示樣式, 當成首頁功能項放置的地方.

(3.) 再點選float menu中的位置功能時, 會開啟Google的地點選擇器.
使用Google地標選擇(PlacePicker)是因為他具有 (1.) 定位當前位置功能 (2.) 滑動地圖選擇地點 (3.) 特定地點附近的地標 (3.) 關鍵字搜尋地點. 這四樣功能統整成兩個畫面的操作, 個人使用上是覺得蠻方便的因此選擇Google提供的套件來當成位置選擇.
在選定完位置後, 返回主頁會在callback

(void)placePicker:(GMSPlacePickerViewController *)viewController didPickPlace:(GMSPlace *)place;

得到從地點選擇器選擇的位置place物件, 並從中拿出經緯place.coordinate.latitude及place.coordinate.longitude. 則又會在重打一次API並刷新餐廳列表以顯示特定地點附近的餐廳.

(4.) 點擊進入特定餐廳的細節頁面時, 上次的homework是使用了專案裡面預設圖來顯示, 因此並不會依據餐廳經緯度來顯示地圖的Thumbnail. 這次的進度也更改了這塊使用了Google的Static Map功能. 如下所示,

https://maps.googleapis.com/maps/api/staticmap??center=[latitude, longitude]&&markers=color:red%7Clabel:S%7C[latitude, longitude]&size=[w]x[h]&scale=2&zoom=16&language=zh-TW&key=[API Key]

Google提供了特定地點組成map thumbnail URL的規則, 讓你可以去以非同步方式載圖顯示, 當然還有其他設定值可以使用, 有興去的話可以查一下Static Map這個Google地圖的功能

(5.) 在顯示map thumbnail的ImageView, 我想把它當成可以點的部分來提供路徑導航及街景顯示的功能選單, 因此ImageView也使用了TapGesture讓它可以點擊並顯示AlertController 的 ActionSheet選單.
特別提到的部分是街景功能也是使用了Google地圖的GMSPanoramaView元件, 這邊我將此元件包成一個獨立的ViewController來顯示特定經緯度周遭的街景.
用意是覺得當想去特定餐廳時, 可能會需要看周遭環境認識一下, 說不定自己搭車時會需要知道在哪下車, 或告訴相約的人附近有什麼特別的標的物以表示目的地不遠了(這個Case是我猜的…..囧)

後續看時間上是否能加入相關過濾條件來選擇餐廳, 比如:消費程度, 距離 ,是否當前仍然營業中及評論顯示來讓使用者更明白過往消費者的用餐體驗來做為參考依據. 東西變多的話, 程式架構也要陸續調整 😓

[操作流程畫面]

--

--