🔴 Let's Build UBER with SwiftUI | iOS 16 & Xcode 14

UberClone: RouteView

구현 목표

• 도착지로 이어지는 UI 구현

구현 태스크

• 출발지에서 도착지까지의 경로 받아오기
• 맵뷰 내 해당 경로 UI 그리기

핵심 코드

var userLocationCoordinate: CLLocationCoordinate2D?

...

 func mapView(_ mapView: MKMapView, didUpdate userLocation: MKUserLocation) {
            userLocationCoordinate = userLocation.coordinate
            setRegion(with: userLocation.coordinate)
        }

최초 유저 정보를 통해 실행되는 맵뷰의 델리게이트 함수 속에서 해당 값을 전역에서 접근 가능하도록 담아두기

private func getDestinationRoute(from start: CLLocationCoordinate2D, to destination: CLLocationCoordinate2D, completion: @escaping(Result<MKRoute, Error>) -> Void) {
            let start = MKPlacemark(coordinate: start)
            let destination = MKPlacemark(coordinate: destination)
            let request = MKDirections.Request()
            request.source = MKMapItem(placemark: start)
            request.destination = MKMapItem(placemark: destination)
            let direction = MKDirections(request: request)
            direction.calculate { response, error in
                guard
                    error == nil,
                    let route = response?.routes.first else {
                    if let error = error {
                        completion(.failure(error))
                    } else {
                        completion(.failure(URLError(.badURL)))
                    }
                    return
                }
                completion(.success(route))
            }
        }

• 출발지와 도착지가 좌표값으로 주어질 때 MKDirections의 메소드 calculate를 통해 경로를 리턴하는 핸들러 함수

func configurePolyline(with destinationCoordinate: CLLocationCoordinate2D) {
            guard let userLocationCoordinate = userLocationCoordinate else { return }
            getDestinationRoute(from: userLocationCoordinate, to: destinationCoordinate) { [weak self] result in
                switch result {
                case .success(let route):
                    self?.parent.mapView.addOverlay(route.polyline)
                case .failure(let error): print(error.localizedDescription)
                }
            }
        }

• 도착지가 주어질 때 전역에서 접근 가능했던 현 시점의 유저 정보(즉 출발지의 좌표값)을 통해 경로를 받아옴
• 경로를 지도 상에 표현하기 위해 addOverlay를 통해 추가

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
            let polyline = MKPolylineRenderer(overlay: overlay)
            polyline.strokeColor = .systemBlue
            polyline.lineWidth = 6
            return polyline
        }

• 맵뷰 내 오버레이가 추가될 때 실행되는 델리게이트 함수
• 색깔 및 굵기 등을 미리 설정 가능

func updateUIView(_ uiView: UIViewType, context: Context) {
        if let selectedLocation = viewModel.selectedLocation {
            context.coordinator.addAndSelectAnnotation(with: selectedLocation)
            context.coordinator.configurePolyline(with: selectedLocation)
        }
    }

• UIViewRepresentable의 메소드 중 뷰를 업데이트하는 코드 내에서 뷰 모델의 selectedLocation을 관찰한 이후 해당 좌표로의 경로를 받아와 선을 그리는 델리게이트 함수 호출

구현 화면