【SwiftUI】MapKitで所要時間と距離数を表示させる方法！時間と分単位に調整

class MKMapView : UIView // UIKit
public struct Map<Content> : View where Content : View  // SwiftUI

MapModels.swift
struct UIMapView: UIViewRepresentable {
    func makeUIView(context: Self.Context) -> MKMapView {
      // 省略
    }
    func updateUIView(_ uiView: MKMapView, context: Self.Context) {
        // 省略
    }
    // makeCoordinatorメソッドを追加
    func makeCoordinator() -> Coordinator {
      Coordinator(self,expectedTravelTime: $expectedTravelTime,distance: $distance)
    }
} 
// Coordinatorクラスを拡張して追加
extension UIMapView{
    class Coordinator: NSObject {
        var control: UIMapView
        @Binding  var expectedTravelTime:Double // 所要時間 秒単位
        @Binding  var distance:Double // 距離数  m単位
        
        init(_ control: UIMapView,expectedTravelTime:Binding<Double>,distance:Binding<Double>){
          self.control = control
            // Binding型はアンダースコア(_)をつける
            _expectedTravelTime  = expectedTravelTime
            _distance = distance
        }
    }
}

MapModels.swift
struct UIMapView: UIViewRepresentable {
  let Manager = MapManager()

  @Binding  var expectedTravelTime:Double // 所要時間 秒単位
  @Binding  var distance: Double          // 距離数 m単位

  // 以下省略
  }

ContentView.swift
import SwiftUI
import MapKit

struct ContentView: View {

    @State  var expectedTravelTime:Double = -1  // 所要時間
    @State  var distance: Double = 0            // 距離数

    var body: some View {
        UIMapView()
    }
}

 大元  ↔︎ 橋渡し ↔︎ 実際に値が格納される
ContentView：expectedTravelTime ↔︎ UIMapView：expectedTravelTime ↔︎ Coordinator：expectedTravelTime
ContentView：distance ↔︎ UIMapView：distance ↔︎ Coordinator：distance

polyline           // 経路を示す線(オブジェクト)
name               // ルートの名称
distance           // 距離(メートル単位)
expectedTravelTime // 所要時間

MapModels.swift
func makeUIView(context: Self.Context) -> MKMapView {
// 省略〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
    // ルートを取得
    let route = directionResonse.routes[0]

    // 以下を追加
    // 所用時間と距離を格納
    context.coordinator.expectedTravelTime = route.expectedTravelTime
    context.coordinator.distance = route.distance

    // ビューにオーバーレイオブジェクトを追加
    mapView.addOverlay(route.polyline, level: .aboveRoads)

print(route.expectedTravelTime)
// 結果：20417.0 秒 → 5時間40分(希望)
print(route.distance) 
// 結果：507203.0 m → 507.2km(希望)

20417.0 秒 ÷ 60秒 = 約340分
20417.0 秒 ÷ ( 60秒 × 60分 ) = 約5.67時間

func formatTime(_ time:Double) -> String{
    switch time {
    case -1 :
        return "経路を検索中..."
    case 0..<60 :
        return String(time) + "秒"
    case 0..<3600 :
        return String(format: "%.0f", time/60) + "分"
    default:
        let hour = Int(time/3600)
        let minutes = (time - Double(hour * 3600))/60
        return String(hour) + "時間" + String(format: "%.0f", minutes)  + "分"
    }
}

507203.0 m ÷ 1000m = 507.2km

ContentView.swift
struct ContentView: View {
    @State  var expectedTravelTime:Double = -1  // 所要時間
    @State  var distance: Double = 0            // 距離数
    
    func formatTime(_ time:Double) -> String{
        switch time {
        case -1 :
            return "経路を検索中..."
        case 0..<60 : // 1分以下
            return String(time) + "秒"
        case 0..<3600 : // 1時間以下
            return String(format: "%.0f", time/60) + "分"
        default: // 1時間以上
            let hour = Int(time/3600)
            let minutes = (time - Double(hour * 3600))/60
            return String(hour) + "時間" + String(format: "%.0f", minutes)  + "分"
        }
    }
    
    var body: some View {
        VStack{
            HStack{
                Spacer()
                Image(systemName:"clock")
                Spacer()
                Text("\(formatTime(expectedTravelTime))").frame(width: 200)
                Spacer()
            }
            HStack{
                Spacer()
                Image(systemName:"arrow.triangle.turn.up.right.circle")
                Spacer()
                Text(String(format: "%.1fkm", distance/1000)).frame(width: 200)
                Spacer()
            }
            UIMapView(expectedTravelTime: $expectedTravelTime,distance: $distance)
        }
    }
}