iOS ) 왕초보를 위한 네이버 지도 API 써보기 (2/2)

안녕하세요 금방 왔죠 ㅎㅎ

네이버 지도 API를 사용하기 위해 세팅작업을 저번 글에서 했었는데요,

아직 세팅을 하지 못하신 분들은 <왕초보를 위한 네이버 지도 API 써보기 (1/2)>가셔서 세팅작업을 해주세요 XD

오늘은 진짜로 네이버 지도 API를 사용한 앱을 만들거에요 :)

왕초보를 위한 네이버 지도 API 써보기 (2/2)

---

저번시간에 여기에 가시면, 어떻게 API를 써야하는지 나와있다고 그랬죠? Swift로도 잘 나와있구요. 

그리고, 우리 네이버 GitHub에서 받았던 지도 SDK있죠? 그 폴더에 가보시면,

이렇게 샘플코드들이 있답니다. 이 코드를 보시는 것도 큰 도움이 될거에요!

오늘은 제가 겪었던 오류들 등등을 이야기할거에요 :)

시작해볼까요?

1. 프로젝트를 연다. 

2. 코드복붙..

여기에 가시면 이러한 코드들이 있는데, 복붙해줍니다. 

그럼!!

이러한 오류들을 만날 수 있어요 ^_^

이제 네이버가 하라는대로 해봅시다. 

3. NMapView객체 생성.

viewDidLoad()밖에 해주세요!

var mapView: NMapView?

4. 애플리케이션 등록 시 발급받은 클라이언트 아이디 설정.

이 부분에 저번시간에 만들어졌던 클라이언트 ID있죠? 그걸 저기에 넣어주세요,

5. NMapView 객체에서 발생하는 상태 변화 및 터치 이벤트 처리를 위한 delegate를 등록

class ViewController: UIViewController, NMapViewDelegate, NMapPOIdataOverlayDelegate

그럼 오류가 다 사라졌지만, 새로운 오류가 생기게 됩니다. 

NMapPOIdataOverlayDelegate를 준수하지 않고 있네요. 

딱봐도 optional이 아닌 함수들을 구현해주어야 이 오류가 사라질 것 같아요. 

이것이 Objective-C....ㄷㄷ..네...근데 뭔가 느낌적인 느낌으로 위 4개의 함수들이 optional이 아닌것을 할 수 있습니다ㅎㅎ..

아니 이게 optional이 아니면 같이 첨부라도 해놓으면 좋을텐데...네이버...

처음에 이걸 어떻게 해야하나...해서...삽질을 좀 했습니다. 

답은 예제코드를 보자..!ㅎㅎ..

Swift예제코드 > Samples >  MapViewController를 보시면

open func onMapOverlay(_ poiDataOverlay: NMapPOIdataOverlay!, imageForOverlayItem poiItem: NMapPOIitem!, selected: Bool) -> UIImage! {
        return NMapViewResources.imageWithType(poiItem.poiFlagType, selected: selected)
    }
    open func onMapOverlay(_ poiDataOverlay: NMapPOIdataOverlay!, anchorPointWithType poiFlagType: NMapPOIflagType) -> CGPoint {
        return NMapViewResources.anchorPoint(withType: poiFlagType)
    }
    open func onMapOverlay(_ poiDataOverlay: NMapPOIdataOverlay!, calloutOffsetWithType poiFlagType: NMapPOIflagType) -> CGPoint {
        return CGPoint(x: 0, y: 0)
    }
    open func onMapOverlay(_ poiDataOverlay: NMapPOIdataOverlay!, imageForCalloutOverlayItem poiItem: NMapPOIitem!, constraintSize: CGSize, selected: Bool, imageForCalloutRightAccessory: UIImage!, calloutPosition: UnsafeMutablePointer<CGPoint>!, calloutHit calloutHitRect: UnsafeMutablePointer<CGRect>!) -> UIImage! {
        return nil
    }

딱 위 네 코드가 꼭 구현해줘야하는 함수에요.

이걸 복사해서, 우리 프로젝트로 붙혀넣기 해줍시다. 

그럼 

또 이러한 오류를 볼 수 있습니다....

다시 예제코드의 Swift예제코드 > Samples 에 보시면, NMapViewResources.swift파일이 있는 것을 볼 수 있습니다. 

우리는 이게 없어서 오류가 나는거에요. 

다시 우리 프로젝트로 가서, 새로운 프로젝트 파일을 만들어준뒤, 예제코드의 NMapViewResources.swift내용을 복사해서 붙혀넣기 해줍시다. 

참고로 지금해야 하는 작업은 아닌데, 

우리 프로젝트의 NMapViewResources.swift(방금 만든거)의 모양은 이런반면에,

네이버 지도 API 예제의 NMapViewResources.swift을 보면 

이렇게 뭔가가 있는 것을 볼 수 있습니다..

이 이유는 Assets때문인데요, 네이버 지도 API 예제의 Assets을 가보면, 

이런 그림들이 있는 것을 볼 수 있어요. 

우리도 넣어줘봅시다. 

네이버 API 예제폴더 > NMapSampleSwift > NMapSampleSwift > Assets 에 들어가시면 

저렇게 폴더들이 쫙 나오는데, 저것을 다 복사해서 

우리 프로젝트의 Assets에 넣어주면 된답니다. 

우리 프로젝트에 넣어준 모습이에요. 

그리고 다시 우리 프로젝트의  NMapViewResources.swift에 가보면,

이렇게 예쁘게 그림이 적용된 것을 볼 수 있습니다 :)

자 일단 에러가 다 사라졌죠? ㅎㅎㅎㅎ

실행을 한번 해볼까요? 

오...이게 기본 위치인가봐요 ㅎㅎ 지도 처음에 딱 떴을 때..쾌감.......XD

어때요 ㅎㅎ? 기본설정은 조금 복잡했지만, 쓰는 건 쉽죠? 저도 예제코드들을 더 연구해서 다양한 시도를 해볼 생각이에요 :)

왕초보를 위한 네이버 지도 API써보기 시리즈는 여기서 마칠거에요. 기능단위로 돌아올까..하다가 

이미 예제코드에 다 있어서..하핫 

아무튼 지도 성공적으로 띄우신분들은 축하드려요!

난 아직도 모르겠다!!오류가난다!!!!하시는 분들은 댓글이나, PC화면 오른쪽 하단에 있는 "궁금한점"을 눌러서 질문해주세요.

알림이 제 폰으로 와서 제가 바로바로 답장드릴 수 있답니다.

오늘도 도움이 되었길 바라며..안녕!