[iOS] KakaoMap API 써보기

KakaoMap API 써보기

굉장히 오랜만에 왔다.. 티스토리.. 이제 꾸준히 써야지..

 

자료

- 카카오 공식 문서 - Kakao 지도 API

- 위도경도 찾기 - 위도경도 찾기

위도경도 찾기

이거 말고 구글지도로 검색하면 바로 나옴

---

굉장히 구리다는 점..

1. 초기 세팅

 

아래 블로그에 굉장히 잘 나와있다.

Kakao Maps API with Swift

Kakao Maps API with Swift

1. 프레임워크 추가하기 (옵젝씨 기반이라고 podfile, spm 같은 따로 제공하는 의존성 관리 도구가 없당 - 미친거아냐;;;;;)
2. header file 추가하기
3. 맵뷰 올리기

 

header 부분 경로 추가할 때

해당 파일을 show in finder를 누른 다음에

해당 파일 선택 후 command+option+c를 하면 해당 파일의 경로가 복사되니 그렇게 하도록

 

→ 이거 땜에 제법 애를 먹었으니,,, 그냥 이렇게 하자..

그리고 웬만하면 add files to 프로젝트 이름과 같이 엑코내에서 폴더 추가하길.. 안그러면 개고생한다.

 

---

2. 좌표를 통해 주소값 얻기

MTMapReverseGeoCoderDelegate 프로토콜을 채택해줘야 하는데

그전에 Bridging-Header.h 파일에 모듈을 추가해줘야 한다.

그리고 geocoder라는 MTMapReverseGeoCoder객체의 인스턴스를 하나 만들어준다.

 

그리고 MTMapViewDelegate 에 있는 함수인 finishedMapMoveAnimation 함수 내부에

MTMapReverseGeoCoder 객체의 인스턴스를 하나 만든다.

 

finishedMapMoveAnimation함수는 지도가 이동이 끝난 후의 좌표값(위도, 경도 → 여기서는 mapCenterPoint)을 얻을 수 있다.

 

그럼 이때 만들어준 geocoder의 mapPoint 파라미터에 해당 좌표값을 넣어준다.

그리고 델리게이트는 이걸 만들어준 뷰컨이니까 self로 해주고,

앱키를 넣어준다.

 

그리고 뷰컨에서 생성한 geocoder에 함수 내부에서 만든 geocoder를 저장한 후에

startFindingAddress를 통해서 값을 요청한다.

 

해당 객체는 주소 반환을 비동기식으로 객체에 전달해주는 것이다.

 

이렇게 아래와 같이 하면 된다.

그리고 좌표값을 변환해서 문자열값을 얻기 위해서는

mtMapReverseGeoCoder(_: MTMapReverseGeoCoder!, foundAddress: String!)라는 함수에서

addressString 파라미터를 통해 값을 얻어오면 된다.

 

(*근데 이 MTMapReverseGeoCoder(init~)는 조만간 deprecated된다고 하니,, 새로 나온 API를 앞으로 공부해야 할 것 같다...

 

이거.. 진짜.. 자료가 없어서 어떻게 해야 하는지 모르겠어서 삽질을 좀 했다.

근데 느낀 점은... 이 거지같은 삽질 속에 이게 막상 되니까 행복하다는 점...

뭐랄까.. 그동안 삽질을 하고 값을 얻은 적이 별로 없었는데 이거 좀.. 행복한 기분이네...

 

하면서 참고한 자료다.

https://apis.map.kakao.com/ios/documentation/#MTMapReverseGeoCoder

카카오 공식 문서.. 아요한테는 불친절하다.. 업데이트 좀 해라...

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

 

---

3. 핀 꽂기 MTMapPOIItem

이거를 어떻게 만들어야 하나. 이거는 사실 이제 기본 공식 문서에서 default 값으로 제공하는 이미지가 있다.

근데 카카오티에서는 customImage가 들어가기 때문에 이 아이를 지정해주는 방법이 있다.

 

[ step 1 ]

	public lazy var departurePoiItem = MTMapPOIItem().then{
        $0.markerType = .customImage
        $0.mapPoint = .init(geoCoord: .init(latitude: departureLat, longitude: departureLon))
        $0.showAnimationType = .springFromGround
        $0.customImageName = "icn_letsgo"
    }
    
    public lazy var destinationPoiItem = MTMapPOIItem().then{
        $0.markerType = .customImage
        $0.mapPoint = .init(geoCoord: .init(latitude: destinationLat, longitude: destinationLon))
        $0.showAnimationType = .springFromGround
        $0.customImageName = "icn_arrive"
        $0.itemName = timeLabel.text
    }

→ 이미지를 직접 지정하려면 markerType에서 customImage를 선택한다.

이외에도 customSelectedImage 등 다양하게 있는데 편한 거 쓰면 될 거 같다.

→ mapPoint : 마커가 있을 위치

→ showAnimationType : 어떤 형식으로 마커가 뜨는지 .springFromGround는 땅바닥에서 뽕하고 올라오는 느낌이다. 이외에 하늘에서 떨어지는 것도 있다고 함.

→ itemName은 POI Item 아이콘이 선택되면 나타나는 말풍선(Callout Balloon)에 보여지게 되는 이름인데

나는 시간을 보여주려고 이렇게 설정했지만 내가 원하는 방식이 아니라 아쉽다.

 

 

[ step 2 ]

extension TaxiViewController {
    private func setupKakaoMap() {
        kakaoMapView = MTMapView(frame: self.view.frame)
        kakaoMapView.delegate = self
        kakaoMapView.baseMapType = .standard
        kakaoMapView.currentLocationTrackingMode = .onWithHeading
        kakaoMapView.setMapCenter(MTMapPoint(
            geoCoord: MTMapPointGeo(latitude: (departureLat+destinationLat)/2, longitude: (departureLon+destinationLon)/2)),
            zoomLevel: 5, animated: true)
        kakaoMapView.addPOIItems([departurePoiItem, destinationPoiItem])
        kakaoMapView.addPolyline(polyLine)
        kakaoMapView.fitAreaToShowAllPolylines()
    }
}

그리고 맵뷰에 addPOIItems를 통해서 추가해주면 된다!!!

 

 

customImageAnchorPointOffset

카카오 공식문서가 한글로 되어 있어서 읽어보면 알 수 있지만, 설명하자면...

이걸 지정해준 이유는 아래 출발 이미지와 파란원은 별개이다.

실제로 위에 나와있는 herePoiItem은 파란원인데 저 customImageAnchorPointOffset을 통해 출발 마커의 아랫부분으로 이동시켜줬다.

이미지의 하단 중앙이 Anchor Point가 된다는 점에서 이미지에서 원하는 부분이 내가 원하는 좌표에 올라가지 않는 경우도 있어서

이거를 사용해서 offset을 이동시켜주면 좋을 것 같다.

 

나의 경우, 연습 플젝으로 한 기기에만 대응해서 한 것이니..