[iOS] Kakao/Daum Map 연동

 

 

안녕하세요~!! 5anniversary입니다~!~!~!~!~!~!~!~!

 

이번 포스팅에서는 카카오, 다음 맵 연동을 해보려구 해요~!

 

카카오 개발자 지원 사이트, API 문서 사이트를 참고해서 만들었습니다

 

 

평소에 카카오 맵을 자주 사용하는 사용자의 입장으로서,,, 지도 API 사용이 필요한 시기가 찾아와서 카카오 맵 API를 사용해보았습니다!!

 

천천히 알아볼까요??

 

우선 workspace를 만들어보져

생성된 Workspace의 bundleIdentifier를 카카오 개발자 사이트에 등록하러 가볼거에요!!

 

카카오 개발자 사이트에 로그인을 하시구!! 내 어플리케이션으로 들어가보면

이렇게 나오는데 애플리케이션 추가를 해볼게요~~

 

 

이 다음에 해당 앱에 들어가서 앱 설정 > 플랫폼 으로 들어가볼까요??

 

 

여기서 iOS 플랫폼을 등록해주시면 됩니다

 

 

아까 생성했던 workspace에서 bundleidentifier를 가져오시면 되요~~

 

앱스토어 아이디, 아이패드 앱 아이디는 아직 출시하지 않았기 때문에 넘어가도록 할게요~~

 

등록이 되었네요!!

 

이제 앱 설정 > 앱 키로 들어가볼까요??

 

여기서 네이티브 앱 키를

 

info.plist에 넣어줄거에요!!

이렇게 생성해주시구요!!

 

SDK를 받으러 가볼까요??

 

다운로드

 

받으셨다면 압축 해제를 해주신 다음

 

프로젝트에 넣어주기 전에!!!

 

카카오 맵 SDK를 사용하기 위해 필요한 프레임워크를 추가할까요???

- OpenGLES.framework
- SystemConfiguration.framework
- CoreLocation.framework
- QuartzCore.framework
- libc++.tbd
- libxml2.tbd
- libsqlite3.tbd

 

를 하나씩 추가해주세요~~

 

다음으로 Frameworks 폴더에 Add Files를 해볼거에요~~

 

 

그리고 가이드를 보면

설명이 되어있어요~!!

 

찾아서 No로 바꿔줍시다!!!

 

다음으로는 KakaoMap SDK가 Objective-C로 작성이 되어 있기 때문에 헤더파일을 통해 연결을 해줘야해요!!

 

관리 폴더를 만들어서 연결헤더 파일을 만들어봅시다!!

 

 

 

#ifndef BridgeHeader_h
#define BridgeHeader_h

#import <DaumMap/MTMapView.h>

#endif /* BridgeHeader_h */

 

코드는 이렇게 작성해주세요!!

 

그리고 등록도 해주셔야해요!!

 

Objective-C Bridging Header를 사용해서 검색해주세요!!

 

저와 같은 구조를 사용하신다면

 

내용은

 

KakaoMapTest/Header/BridgeHeader.h

로 작성해주시면 됩니다!!

 

🎉 🎉 🎉 후,,, 설정이 끝났어요🎉 🎉 🎉 

 

이제 ViewController에서 사용만 하면 되요!!!

 

우선 MTMapViewDelegate를 상속받아와야해요!!

 

그 다음 Map API에서 나오는 대로 사용하면 됩니다!!!

 

예시를 간단하게 핀 찍어보는걸로 들어볼게요!!

 

지도 뷰, 핀 생성 코드

    let mapView = MTMapView().then {
        $0.setMapCenter(.init(geoCoord: .init(latitude: 37.537229, longitude: 127.005515)), animated: true)
    }

    let po1 = MTMapPOIItem().then{
        $0.markerType = .redPin
        $0.mapPoint = .init(geoCoord: .init(latitude: 37.517229, longitude: 127.005525))
        $0.showAnimationType = .noAnimation
        $0.tag = 1
        $0.customImageName = "map_pin"
    }
    
    let po2 = MTMapPOIItem().then{
        $0.markerType = .redPin
        $0.mapPoint = .init(geoCoord: .init(latitude: 37.537229, longitude: 127.005525))
        $0.showAnimationType = .noAnimation
        $0.tag = 2
    }

    let po3 = MTMapPOIItem().then{
        $0.markerType = .redPin
        $0.mapPoint = .init(geoCoord: .init(latitude: 37.537229, longitude: 127.025525))
        $0.showAnimationType = .noAnimation
        $0.tag = 3
    }

    let po4 = MTMapPOIItem().then{
        $0.markerType = .redPin
        $0.mapPoint = .init(geoCoord: .init(latitude: 37.537229, longitude: 127.105525))
        $0.showAnimationType = .noAnimation
        $0.tag = 4
    }

    let po5 = MTMapPOIItem().then{
        $0.markerType = .redPin
        $0.mapPoint = .init(geoCoord: .init(latitude: 37.437210, longitude: 127.005525))
        $0.showAnimationType = .noAnimation
        $0.tag = 5
    }

 

등록입니다~~

 

        view.addSubview(mapView)
                
        mapView.delegate = self
        mapView.baseMapType = .standard
        mapView.snp.makeConstraints { (make) in
            make.top.equalToSuperview()
            make.leading.equalToSuperview()
            make.trailing.equalToSuperview()
            make.bottom.equalToSuperview()
        }
        
        
        mapView.addPOIItems([po1, po2, po3, po4, po5])
        mapView.fitAreaToShowAllPOIItems()

 

완성이 되었어요~!~!~! 👏👏👏

마지막으로!!!

 

GitHub 코드도 올렸으니 확인해주시면 감사하겠습니다~~ (키값은 재발급 해서 실행해도 맵이 안나올거에요!!)