[ios] 지도 위에 사용자 정의 POI (Point of Interest) 표시하기

14 Dec 2023

iOS 애플리케이션에서 지도 위에 사용자 정의 POI (Point of Interest)를 표시하는 기능은 애플리케이션의 사용자에게 추가 가치를 제공할 수 있습니다. 사용자 정의 POI를 표시하면 특정 장소의 위치나 정보를 강조하거나 사용자 주변의 관심있는 지점을 강조할 수 있습니다.

1. 사용자 정의 POI 생성하기

먼저, 사용자 정의 POI를 생성해야 합니다. POI는 위치 (위도 및 경도), 제목, 설명 및 사용자 정의 아이콘으로 구성될 수 있습니다.

import MapKit

let poiCoordinate = CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)
let poiTitle = "Golden Gate Bridge"
let poiSubtitle = "San Francisco, California"
let poiAnnotation = CustomAnnotation(coordinate: poiCoordinate, title: poiTitle, subtitle: poiSubtitle)
mapView.addAnnotation(poiAnnotation)

위와 같이 CustomAnnotation 클래스를 생성하여 지도 위에 POI를 추가합니다. CustomAnnotation 클래스는 MKAnnotation 프로토콜을 채택하여 POI의 위치 및 정보를 제공합니다.

2. 사용자 정의 POI 아이콘 표시하기

POI를 나타내는 아이콘은 사용자에게 직관적인 정보를 전달할 수 있는데, 이를 위해 다양한 아이콘을 사용할 수 있습니다. 자체 디자인한 아이콘 또는 시스템 제공 이미지 모두 사용할 수 있습니다.

// CustomAnnotationView 클래스 내에서 사용자 정의 아이콘 표시
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    guard let annotation = annotation as? CustomAnnotation else { return nil }
    
    let identifier = "customAnnotation"
    var annotationView: MKAnnotationView
    
    if let dequeuedView = mapView.dequeueReusableAnnotationView(withIdentifier: identifier) {
        dequeuedView.annotation = annotation
        annotationView = dequeuedView
    } else {
        annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: identifier)
        annotationView.canShowCallout = true
        annotationView.calloutOffset = CGPoint(x: -5, y: 5)
        // 사용자 정의 아이콘 설정
        annotationView.image = UIImage(named: "customPOIIcon")
    }
    return annotationView
}

위 코드에서 mapView(_:viewFor:) 함수를 사용하여 POI의 아이콘을 설정합니다. 해당 함수 내에서 POI에 대한 사용자 정의 이미지를 설정할 수 있습니다.

3. 사용자 정의 POI 상호작용 추가하기

POI를 탭하거나 선택했을 때 추가 작업을 수행하도록 지도와 상호작용할 수 있습니다. 예를 들어, POI를 탭하면 해당 장소의 세부 정보를 표시하거나 다른 액션을 실행할 수 있습니다.

func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
    if let customAnnotation = view.annotation as? CustomAnnotation {
        // 사용자 정의 POI 선택 시 추가 작업 수행
        print("Selected POI: \(customAnnotation.title ?? "")")
    }
}

위의 코드에서 mapView(_:didSelect:) 함수를 사용하여 POI를 선택했을 때 추가 작업을 수행합니다.

사용자 정의 POI를 지도 위에 표시하고 상호작용하는 기능을 추가함으로써, iOS 애플리케이션 사용자에게 향상된 지도 경험을 제공할 수 있습니다.

참고 자료

Apple MapKit Framework