[JS] 카카오 좌표>주소변환 API 사용

HTML5에서 제공하는 geolocation API를 통해 위치 검색을 허용하면 현재 좌표를 얻어낸다.

	function getLocation() {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition(function(position) {
				let lon = position.coords.latitude; //위도
				let lat = position.coords.longitude; //경도
				toAddress(lon,lat);
		    }, function(error) {
		      console.error(error);
		    }, {
		      enableHighAccuracy: false,
		      maximumAge: 0,
		      timeout: Infinity
		    });
		}
	}

 

여기서 얻어낸 좌표를 카카오 API를 이용해 시,도 단위의 위치를 뽑아내고 싶었다.

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

Kakao Developers

 

카카오 디벨로퍼 사이트에서 좌표로 행정구역정보 받기 부분을 참고해야 한다. 

 

적용한 나의 코드 (부족함이 많다..) 

function toAddress(lon,lat){
		console.log(`lon: ${lon}, lat: ${lat}`);
		$.ajax({
			url : `https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${lat}&y=${lon}&input_coord=WGS84`,
		    type : 'GET',
		    headers : {
		      'Authorization' : '나의 카카오 API 코드'
		    },
		    success : function(result) {
				let totatlCount = result.meta.total_count; //총 문서 수 
		    	 if (totatlCount > 0) {
		            if (result.documents[0].road_address === null) {
		                addressName = result.documents[0].address.region_1depth_name; //지역(시) 이름 
		            } else {
		                addressName = result.documents[0].road_address.region_1depth_name;
		            }
		        }
		        addr = addressName;
		    },
		    error : function(e) {
		      console.log(e);
		    }
		});
	}

 

중요한 것은 url에서 위도, 경도 순으로 오는 것이 아니라 경도, 위도 순으로 오는 것이다!

https://dapi.kakao.com/v2/local/geo/coord2address.json?x=${lat}&y=${lon}&input_coord=WGS84

이것 때문에 몇시간을 더 삽질했다. 😂😂

 

html 요소에 이벤트를 걸어주어 해당 함수가 실행될 수 있도록 했다. 

 

 

 

---

📃참고

https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API

Geolocation API 사용하기 - Web API | MDN

 

https://velog.io/@lsj8367/JavaScript-%EC%A2%8C%ED%91%9C-%EC%A3%BC%EC%86%8C-%EB%B3%80%ED%99%98%EA%B3%84

[JavaScript] GeoLocation api, 카카오 좌표 -> 주소 변환계 구현하기

 

 

** 주니어라 부족함이 많습니다. 잘못된 부분이 있다면 지적은 감사히 받겠습니다!