mapKit Polyline2

지도위에 사용자 경로 나타내기

목차

1. mapView 초기화 2. Polyline 그리기 2. Polyline 커스텀

mapView 초기화

• map에 사용자의 위치를 나타내고, 사용자의 위치를 추적하기 위한 locationManger의 성능을 best로 설정합니다.

    func makeUIView(context: Context) -> MKMapView {
        mapView.delegate = context.coordinator
        mapView.showsUserLocation = true
        
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.delegate = context.coordinator
        return mapView
    }

• 지도가 성공적으로 로드가 되면 현재 사용자의 위치기준으로 위도, 경도 500미터 범위로 확대해서 지도를 나타냅니다.

    func mapViewDidFinishLoadingMap(_ mapView: MKMapView) {
        if let userLocation = mapView.userLocation.location {
            let region = MKCoordinateRegion(
                center: userLocation.coordinate,
                latitudinalMeters: 500,
                longitudinalMeters: 500
            )
            mapView.setRegion(region, animated: true)
        }
    }

Polyline 그리기

• view에서 버튼을 클릭하면 사용자의 위치 추적을 시작하고, 버튼을 다시한번 클릭하면 추적을 멈추는 방식으로 구현했습니다.

    private var playButton: some View {
        Button {
            isTracking.toggle()
            
            if isTracking {
                locationManager.startUpdatingLocation()
            }else {
                locationManager.stopUpdatingLocation()
            }
        } label: {
            Image(systemName: isTracking ? "pause.circle.fill" : "play.circle.fill")
                .tint(Color.black)
                .font(.system(size: 50))
        }
    }

• startUpdatingLocation()을 하면 사용자의 위치를 받아 userLocations 배열에 저장하고, 지도에 userLocation배열의 요소들을 polyline으로 그립니다.

    @State private var userLocations: [CLLocationCoordinate2D] = []

    func updateUIView(_ uiView: MKMapView, context: Context) {
        uiView.removeOverlays(uiView.overlays)
        
        if !userLocations.isEmpty {
            let polyline = MKPolyline(coordinates: userLocations, count: userLocations.count)
            uiView.addOverlay(polyline)
        }
    }

    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        if let location = locations.last?.coordinate {
            parent.userLocations.append(location)
        }
    }

Polyline 커스텀

    func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
        if let polyline = overlay as? MKPolyline {
            let renderer = MKPolylineRenderer(polyline: polyline)
            renderer.strokeColor = .orange
            renderer.lineWidth = 7
            return renderer
        }
        return MKOverlayRenderer(overlay: overlay)
    }