주소 검색 API 사용 방법에 대해 알아보자


대체로 API 관련하여 예제가 존재하며, 그것을 가져다 쓰면 손쉽게 사용이 가능했는데


이번에 사용할 주소 검색 API는 예제가 존재하지 않는데


그래서 직접 시행착오를 겪으면서 적용을 해보았다.


우선 kakao developers에 존재하는 주소 검색에 관한 개발가이드이다.


https://developers.kakao.com/docs/latest/ko/local/dev-guide#address-coord



주소 검색 API는 REST API 로 제공하며


위와같은 내용뿐이여서 예제없이 처음해봐 매우 난감하였다.


인터넷에 많이 찾아봐도 대부분 서버단에서 처리하는 방법만 나오고 잘 안나왔는데


여기저기 짜집기 하다가 결국 javascript를 사용하여 rest api를 적용하는데 성공하였다.


소스자체는 매우 간단하다.


   $.ajax({
url:'https://dapi.kakao.com/v2/local/search/address.json?query='+encodeURIComponent('숭의동'),
type:'GET',
headers: {'Authorization' : 'KakaoAK APIKEY'},
success:function(data){
console.log(data);
},
error : function(e){
console.log(e);
}
});


REST API 방식이기 때문에 GET type으로 호출하며

headers를 선언하여 개발 가이드에서 안내해주는대로 Authorization 를 선언 후 API KEY를 넣어주었다.


고생한거에 비해서는 굉장히 짧은 코드인데 몇가지 알아보도록하자


우선 첫번째 왜 파라미터를 url에 직접 넣어주었는가?


$.ajax({

...

data : {query : '숭의동'}

...

})


이렇게 해봤는데 에러는 안나지만 api통해서 값을 못가져오는 현상이 발생하였다.


그래서 좀 찾아보니까 데브톡 에서 다음과 같이 안내를 하여서 그대로 따라하였다.



그래서 이렇게 해보니 잘돼서 그대로 사용할 예정이다.


두번째 "KakaoAK APIKEY" 처럼 중간에 띄어쓰기가 무조건 있어야 작동한다.


그리고 REST API를 사용하면서 자주 발생한 에러들


“errorType”:”AccessDeniedError”,”message”:”cannot find Authorization : KakaoAK header”


KA Header is required but neither os nor origin field is given


이렇게 두가지인데 첫번째는 그냥 틈만나면 발생한다. header로 선언해준것을 찾을수 없다는건데


위에 ajax로 보여준 코드대로 작성하면 잘 작동하니 걱정할것은 없다.


두번째는 kakao developer를 사용하면 알겠지만 api key를 여러개 발급해주는데


상황에 맞지않는 key를 사용했기때문에 발생하는 에러이다.


REST API KEY 를 제대로 사용해주면 잘 작동한다.



결과는 위와같이 나오며 필요에따라 ajax를 사용했으니 후처리를 해주면된다.


https://developers.kakao.com/tool/rest-api/open/get/v2-local-search-address.%7Bformat%7D


여기서 직접 어떤 결과가 나오는지 확인해보면된다.



반응형
  1. 질문 2020.12.13 01:20

    안녕하세요. 요즘 카카오주소api에 관심이 가는데요. 이 코드를 엑셀에서 vba로 적용하려면 어떻게 해야할까요?
    답변좀 주시면 감사하겠습니다.

  2. 컴공 학부생1 2021.01.10 22:23

    api key 넣는법 찾고 있었는데 설명이 잘돼있어서 참고하고 갑니다. 감사합니다.

카카오 로드뷰 API 를 사용하는 방법에 대해 알아보자.


http://apis.map.kakao.com/web/sample/basicRoadview/


해당 사이트에 들어가면 Kakao Developer 에서 제공하는 api 사용예제 같은게 나와있다.


    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>로드뷰 생성하기</title>

</head>
<body>
<!-- 로드뷰를 표시할 div 입니다 -->
<div id="roadview" style="width:100%;height:300px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new kakao.maps.Roadview(roadviewContainer); //로드뷰 객체
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체

var position = new kakao.maps.LatLng(33.450701, 126.570667);

// 특정 위치의 좌표와 가까운 로드뷰의 panoId를 추출하여 로드뷰를 띄운다.
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
});
</script>
</body>
</html>


" API key 발급방법 "


API Key 만 있으면 아주 가볍게 사용 가능한 API이다.


아래는 실제로 프로젝트에 조금 손봐서 적용한 사례이다.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>kakao RoadView</title>
<style >
html, body, #roadview {margin: 0; padding: 0; width: 100%; height: 100%}
</style>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY"></script>
<script>
var roadviewContainer, roadview, roadviewClient;
function init() {
roadviewContainer = document.getElementById('roadview');
roadview = new kakao.maps.Roadview(roadviewContainer);
roadviewClient = new kakao.maps.RoadviewClient();
}

function setCoordinate(lat, lng) {
var position = new kakao.maps.LatLng(lat, lng);
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
roadview.setPanoId(panoId, position);
});
}
</script>
</head>
<body onload="init();">
<div id="roadview"></div>
</body>
</html>



출처 : Kakao Developer (로드뷰 사용 예제)

반응형

카카오 API KEY 발급 방법 및 기본 설정에 대해 알아보자.


https://developers.kakao.com/


해당 페이지에 들어가서


하단에 보이는 '앱 개발 시작하기' 버튼을 클릭하자.

(그전에 물론 로그인을 해두면 좋다.)






정상적으로 로그인까지 완료되었으면 아래와 같은 창이 뜬다.


'앱 이름' 과 '회사명' 을 입력하고 '앱 만들기' 버튼을 클릭한다.

(회사명 같은 경우는 나같은경우 테스트로 잠깐 사용해보는거라 '개인' 이라 입력하고 넘어갔다.)


위에서 아이콘 등록을 안하면 아래와 같은 팝업창이 뜨는데


등록할 아이콘이 있다면 해도 좋지만 나중에도 등록할 수 있기때문에 일단은 '게속 진행' 버튼을 클릭하자






그럼 이제 아래와 같이 4종류의 API 키가 주어지는데 두고두고 쓸테니 귀찮으면 따로 기록을 해두자


발급받은 API KEY 를 그대로 쓰면 좋지만 그전에 '설정' 버튼을 클릭해서 따로 설정해줘야 하는게 있다.




중앙에 플랫폼 이라는 부분이 있는데


도메인 주소를 입력해줘야 API KEY를 사용할 수 있기에 '플랫폼 추가'버튼을 클릭해주자.






위에 Android, IOS, 웹 중에 해당사항에 있는것을 하나 선택하고


사이트 도메인을 입력하고 '추가' 버튼을 클릭한다.


* 사이트도메인 입력 시 주의사항 (출처 : https://bos.kr:50300/kwa-manual_v-1608)

1. 보안서버를 사용중인 사람은 'https://도메인:포트번호' 도 함께 추가해 주어야 한다.

2. 'http://도메인주소' 와 'http://www.도메인주소' 는 서로 다른 도메인으로 인식하므로 모두 등록해주어야 한다.


(그냥 본인이 사용할 거면 http://localhost:8080 로 입력해도 좋다.



아래와 같이 사이트 도메인이 입력되어있으므로 


이제 사용하면 된다.




반응형