tags: 釣魚術 SwiftUI

回顧一下先前提及的功能，以及目前對於這些功能的理解

功能許願池

地圖

• 私藏釣點
• 釣點選擇
• 前往釣點

其他功能

• 集郵冊
• 研究釣組
• 吃魚神器 / 料理食譜 / 海鮮餐廳
• 魚類圖鑑
  • 危險魚類圖鑑 (ScrollView / ListView 的實作) -> 局部完成
  • 魚類辨識 (Core ML / Create ML)

地圖的需求分析

1. 雖然現在沒有會員系統，以後如果有的話，打開畫面應該是要選擇 App 的功能後，登入
2. 登入後，從雲上撈取資料到手機內的資料庫，從釣客的私藏釣點紀錄吐出一筆經緯度
3. 把釣客的私藏釣點清單，都在地圖打上圖釘
4. 導航功能太芭樂了，而且我自己偏好使用 Google Map，所以做了這功能搞不好我自己也不想用⋯⋯我覺得我不會做這項
5. 點選釣點最好是能夠吐出這個點，有釣中過哪些魚，翻閱集郵冊，炫耀一番的功能

本日實作

• 說了這麼多，就是先要有一個地圖啦。
• 首先你需要引入 MapKit

FishingLocationView.swift

• 新的 View 原始碼如下

//
//  FishingLocationView.swift
//  BaoAnGongFisher
//
//  Created by nipapa on 2022/9/14.
//

import SwiftUI
import MapKit

struct FishingLocationView: View {
    var body: some View {
        VStack {
            NavigationView {
                MapView()
                    .navigationBarTitle(Text("釣點地圖"), displayMode: .inline)
            }
        }
    }
}

• 上面部分程式碼是利用我們前幾天學過的 VStack 和 NavigationView 擺放內容而已
• 接著，使用 SwiftUI Property Wrappers 之一的 @State 使 region 成為 可改變(mutable) 的屬性，賦予 Map Kit Coordinate Region (區域座標)。

  閱讀 https://swiftuipropertywrappers.com/

• 最後將這個 region 變數餵給 Map

struct MapView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(
            latitude: 25.1125,
            longitude: 121.4582),
        span: MKCoordinateSpan(
            latitudeDelta: 0.005,
            longitudeDelta: 0.005)
        )

    var body: some View {
        Map(coordinateRegion: $region)
            .edgesIgnoringSafeArea(.all)
    }
}

• 將 Preview 內容加上深色模式，好在 Canvas 中快速觀看

struct FishingLocationView_Previews: PreviewProvider {
    static var previews: some View {
        FishingLocationView()
        FishingLocationView()
            .preferredColorScheme(.dark)
    }
}

畫面

• 抓取五股聖母宮的釣魚平台經緯度，來測試地圖功能
  

心得

• 花了一些時間研究了地圖
• 習得不實用知識
  • 地球的經緯度，latitude 1 degree 是 69 miles 也是 111.044736 kms