mapkit annotation

📍 지도위에 마크 표시 (Annotation)

목차

1. 좌표를 CLLocationCoordinate2D 타입으로 저장
2. 저장한 annotations 를 맵 위에 표시
3. Annotations 커스텀 하기

좌표를 CLLocationCoordinate2D 타입으로 저장

• 좌표를 저장하는 방법은 두가지 입니다.
• 하지만 제목, 이미지 이름등 Custom Annotation 을 위해서는 따로 구조체를 만들어 저장하는 것이 좋습니다.

1. extension CLLocationCoordinate2D 에서 상수를 두어 .duckRun 으로 쉽게 사용할 수 있게 하는 방법

extension CLLocationCoordinate2D {
    static let duckRun = CLLocationCoordinate2D(
        latitude: 37.54161,
        longitude: 127.07648
    )
}

2. 변수를 저장하는 방법

// AnnotationItem 구조체 생성
struct AnnotationItem: Identifiable {
    let id = UUID()
    let coordinate: CLLocationCoordinate2D
    let title: String
    let imageName: String
}

    @State private var annotations: [AnnotationItem] = [
        // 위에서 저장한 .duckRun 을 사용하는 모습
        AnnotationItem(coordinate: .duckRun, title: "오리런", imageName: "duck"),
        AnnotationItem(coordinate: CLLocationCoordinate2D(latitude: 37.53958, longitude: 127.07435), title: "스타트 포인트", imageName: "startpoint")
    ]

저장한 annotations 를 맵 위에 표시

• 받아온 annotatinos 변수를 기반으로 가장 간단하게 annotation 을 맵 위에 표시하는 방법은 아래의 코드로 가능합니다.

        for annotation in annotations {
            let pointAnnotation = MKPointAnnotation()
            pointAnnotation.coordinate = annotation.coordinate
            pointAnnotation.title = annotation.title
            mapView.addAnnotation(pointAnnotation)
        }

Annotations 커스텀 하기

• Coordinator 를 활용하여 Annotations 을 커스텀 합니다.
• 저는 오리런을 표시하는 부분과 스타트 포인트를 표시하는 두 부분으로 나눠서 Annotations 를 표시했습니다.

func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, MKMapViewDelegate {
        var parent: MapView
        
        init(_ parent: MapView) {
            self.parent = parent
        }
        
        func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
            guard !(annotation is MKUserLocation) else {
                return nil
            }
            
            var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: "custom")
            
            if annotationView == nil {
                annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: "custom")
            } else {
                annotationView?.annotation = annotation
            }
            
            // annotation 의 제목을 조건으로 custom
            switch annotation.title {
            case "오리런":
                annotationView?.image = UIImage(named: "duck")
                let imageSize = CGSize(width: 30, height: 30)
                annotationView?.frame.size = imageSize
                
                let titleLabel = UILabel()
                titleLabel.text = annotation.title ?? ""
                titleLabel.textAlignment = .center
                titleLabel.font = UIFont.systemFont(ofSize: 12)
                titleLabel.frame = CGRect(x: 0, y: imageSize.height, width: imageSize.width * 3, height: 20)
                titleLabel.center = CGPoint(x: annotationView!.bounds.midX, y: annotationView!.bounds.midY + 25)
                annotationView?.addSubview(titleLabel)


            default:
                annotationView?.image = UIImage(named: "startpoint")
                let imageSize = CGSize(width: 20, height: 20)
                annotationView?.frame.size = imageSize
                
                let titleLabel = UILabel()
                titleLabel.text = annotation.title ?? ""
                titleLabel.textAlignment = .center
                titleLabel.font = UIFont.systemFont(ofSize: 10)
                titleLabel.frame = CGRect(x: 0, y: imageSize.height, width: imageSize.width * 3, height: 20)
                titleLabel.center = CGPoint(x: annotationView!.bounds.midX, y: annotationView!.bounds.midY + 20)
                annotationView?.addSubview(titleLabel)
                
            }
            
            annotationView?.clipsToBounds = false
            
            return annotationView
        }
    }