[ios] 지도에 다중 핀 표시하기

14 Dec 2023

iOS 앱을 개발하다 보면 지도에 다수의 핀을 표시해야 하는 경우가 있습니다. 사용자에게 가게 위치, 명소, 또는 다른 지점을 보여줄 때 이 기능이 유용합니다.

이 블로그 포스트에서는 iOS 지도에 다중 핀을 추가하는 방법을 알아보겠습니다.

1. MapKit Framework 추가하기

우선, 프로젝트에 MapKit 프레임워크를 추가해야 합니다. Xcode에서 프로젝트를 열고, General > Frameworks, Libraries, and Embedded Content에서 MapKit 프레임워크를 추가합니다.

2. 지도 보기 추가하기

다음으로, 지도를 표시할 뷰를 추가합니다. Main.storyboard 파일을 열고, 지도 뷰를 추가합니다. 해당 뷰를 IBOutlet으로 연결하여 코드에서 사용할 수 있도록 합니다.

@IBOutlet weak var mapView: MKMapView!

3. 핀 추가하기

이제 지도에 핀을 추가할 차례입니다. 다음은 핀을 추가하는 간단한 예제 코드입니다.

let annotation1 = MKPointAnnotation()
annotation1.coordinate = CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)
annotation1.title = "San Francisco"
mapView.addAnnotation(annotation1)

let annotation2 = MKPointAnnotation()
annotation2.coordinate = CLLocationCoordinate2D(latitude: 34.0522, longitude: -118.2437)
annotation2.title = "Los Angeles"
mapView.addAnnotation(annotation2)

위 코드에서 MKPointAnnotation을 사용하여 각 핀을 만들고, addAnnotation() 메서드를 사용하여 지도에 핀을 추가합니다.

4. 커스텀 핀 사용하기 (선택 사항)

핀을 커스터마이징하여 이미지나 색상을 변경할 수도 있습니다.

func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    guard annotation is MKPointAnnotation else {
        return nil
    }

    let identifier = "CustomAnnotation"
    var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier)

    if annotationView == nil {
        annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: identifier)
        annotationView?.canShowCallout = true
        annotationView?.rightCalloutAccessoryView = UIButton(type: .detailDisclosure)
    } else {
        annotationView?.annotation = annotation
    }

    return annotationView
}

마무리

이제 여러 개의 핀을 지도에 표시하는 방법을 알게 되었습니다. 지도에 다양한 핀을 추가하여 사용자에게 명확하고 직관적인 정보를 전달할 수 있습니다.

참고문헌: Apple Developer Documentation