swift - 카카오맵 API 연동하기

카카오맵 가이드 페이지를 참고하자!

 

https://apis.map.kakao.com/ios/guide/

 

페이지에 들어가면 SDK 다운로드 버튼이 있습니다.

 

바로 다운로드 해줍니다!

 

그 다음 app key를 발급받기 위해 개발자 페이지로 이동합니다

 

https://developers.kakao.com/

Kakao Developers

 

로그인을 하고 내 애플리케이션을 클릭합니다

 

 

애플리케이션 추가하기를 눌러줍니당

 

 

그러면 이런 화면이 나오는데 앱 이름과 사업자명을 넣어주세요! (사업자명이 없다면 학교?를 넣어주세요 ㅋㅋ)

 

 

저장을 누르면~~ 키가 발급됩니다!

여기서 이제 플랫폼 설정하기를 눌러주세요

 

 

우리는 iOS를 등록해야겠죠?

 

 

그럼 이런 페이지가 나오는데,

번들ID는 프로젝트에서 그대로 가져오면 됩니다. (다르면 안돼요!!)

플랫폼 등록 페이지

 

 

프로젝트 -> General -> Bundle Identifier 에서 가져오시면 됩니당

 

그 다음은 프로젝트 Info.plist에 값을 추가해줘야 합니다

아래 형식으로 넣으라고 하네요!

 

 

Value에는 아까 발급받은 key 중에서 네이티브 앱 키를 넣어주시면 됩니당

 

카카오맵은 Swift 언어를 지원하지 않기 때문에 헤더파일을 만들어야 합니다 ㅠㅠ

헤더파일을 하나 추가해 주시고

 

 

이름을 적고 생성!!

 

 

생성하면 사진처럼 #import <DaumMap/MTMapView.h> 를 추가해 주세요!

그 다음 경로를 적어줘야 합니다 (중요데스)

 

헤더파일을 우클릭 하고 Show in Finder를 클릭!

 

Finder에서 헤더파일에 포커싱(그냥 헤더파일 한 번 클릭)을 하고 

Command + Option + C 를 눌러서 경로를 복사해 줍니다!

 

다시 프로젝트로 이동해서...

 

Target -> 프로젝트 -> Build Settings 로 이동해서 검색창에 Objective-C Bridging을 입력합니다!

그러면 사진처럼 나오는데, 빨간 사각형 부분을 더블 클릭해서 복사한 경로를 입력합니당

 

 

그리고 아까 다운로드 받은 SDK 파일중 lib 폴더 안에 있는 DaumMap.embeddedframework 폴더를 프로젝트 폴더 아래에 드래그해서 추가합니다

 

이제 좀 할게 많은데요...

다음 Map framework가 사용하는 framework들을 추가해야 합니다.

• OpenGLES.framework
• SystemConfigure.framework
• CoreLocation.framework
• QuartzCore.framework
• libc++.tbd
• libxml2.tbd
• libsqlite3.tbd

Target 설정 -> General -> Frameworks, Libraries, ... Content에 추가하면 돼요

 

다 추가하면 아래처럼 되어야 합니다!

그런데 tbd 파일은 두 번씩 추가해야 되더라고요... 저는...

꼭 제대로 추가되었는지 확인합니다

그리고 만약 저기에 DaumMap.framework가 없다면 프로젝트 내에 있는 DaumMap.embeddedframework 를 지우고 다시 넣어주세용 (다시 넣을 때에는 꼭 Finder에서도 삭제되었는지 확인을 합니다.)

 

가장 중요한 것이 바로 헤더파일 경로 설정과 DaumMap.framework 입니다. 이 두 가지로 나중에 실행했을 때 'DaumMap/MTMapView.h' file not found 에러가 발생할 수 있어요 ㅠㅠ

이걸로 시간을 오래 잡아먹었는데 저는 세 가지를 될 때까지 반복했어요 ㅋㅋㅋ

• DaumMap.embeddedframework를 프로젝트와 Finder에서 지우고 다시 추가
• 헤더파일도 마찬가지로 프로젝트와 Finder에서 지우고 다시 추가
• 헤더파일 경로 검토

 

Map용 SDK는 ARC를 지원하지 않는답니다~! 그래서 설정을 해줘야 해요

Build Settings에 들어가서 Objective-C Automatic Reference Counting 값을 No로 바꿔주면 돼요!

 

이제 대망의 코드 작성...

카카오맵 가이드를 따라 작성하면 잘 실행됩니다!!

 

하지만 가이드에 나와있는 코드가 Swift가 아니라면...? ㅠㅠ

 

아래는 제가 사용한 MapView 예시입니다

class MapViewController: UIViewController, MTMapViewDelegate {
    
    @IBOutlet var subView: UIView!
    var mapView: MTMapView?
    
    var mapPoint1: MTMapPoint?
    var poiItem1: MTMapPOIItem?
    
    var latitude : Double = 37.576568
    var longitude : Double = 127.029148
    
    var allCircle = [MTMapCircle]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 지도 불러오기
        mapView = MTMapView(frame: subView.frame)
        
        if let mapView = mapView {
        	// 델리게이트 연결
            mapView.delegate = self
            // 지도의 타입 설정 - hybrid: 하이브리드, satellite: 위성지도, standard: 기본지도
            mapView.baseMapType = .standard
            
            // 현재 위치 트래킹
            mapView.currentLocationTrackingMode = .onWithoutHeading
            mapView.showCurrentLocationMarker = true
            
            // 지도의 센터를 설정 (x와 y 좌표, 줌 레벨 등을 설정)
            mapView.setMapCenter(MTMapPoint(geoCoord: MTMapPointGeo(latitude:  37.456518177069526, longitude: 126.70531256589555)), zoomLevel: 5, animated: true)
            self.view.addSubview(mapView)
        }
    }
    
    // poiItem 클릭 이벤트
    func mapView(_ mapView: MTMapView!, touchedCalloutBalloonOf poiItem: MTMapPOIItem!) {
        // 인덱스는 poiItem의 태그로 접근
        let index = poiItem.tag
    }
    
    override func viewWillDisappear(_ animated: Bool) {
    	// mapView의 모든 poiItem 제거
        for item in mapView!.poiItems {
            mapView!.remove(item as! MTMapPOIItem)
        }
    }
    
    
    // 마커 추가
    func makeMarker(){
    
    	/*
        저는 서버 api를 통해 가져온 데이터를 resultList에 담았어요
        이름, 좌표, 주소 등을 담은 구조체를 담은 배열이에요
        */
    
    	// cnt로 마커의 tag를 구분
        var cnt = 0
        for item in resultList {
            self.mapPoint1 = MTMapPoint(geoCoord: MTMapPointGeo(latitude: item.x, longitude: item.y
            ))
            poiItem1 = MTMapPOIItem()
            // 핀 색상 설정
            poiItem1?.markerType = MTMapPOIItemMarkerType.redPin
            poiItem1?.mapPoint = mapPoint1
            // 핀 이름 설정
            poiItem1?.itemName = item.placeName
            // 태그 설정
            poiItem1?.tag = cnt
            // 맵뷰에 추가!
            mapView!.add(poiItem1)
            cnt += 1
        }
    }
}