ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [iOS] Kakao/Daum Map 연동
    Programing/iOS 2020. 8. 12. 17:39

     

     

    안녕하세요~!! 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 코드도 올렸으니 확인해주시면 감사하겠습니다~~ (키값은 재발급 해서 실행해도 맵이 안나올거에요!!)

    댓글

Designed by Tistory.