[Geolocation Api] 주소 변환 API 사용 위도, 경도값 저장하기

출퇴근 관리 기능을 구현하기 위해서 주소 변환 API를 서치해서 적용해봤다.
HTML5 에 있는 Open Api 중 Geolocation 이라는 Api는 웹에서 사용자의 위치정보를 JS 언어를 통해 반환해준다.
예전에는 제한이 없었으나 현재는 https 로 시작하는 url 에서만 사용 가능한 api이므로 http를 사용하는 곳에서는 사용이 불가능 하다.
그러나 개발시에는 localhost에서는 테스트가 가능하여 브라우저를 이용하여 테스트했다.
사용법은 단순히 js에서 아래와 같이 선언하면 위도, 경도 값 (현재 위치)를 받아올 수 있다.

navigator.geolocation.getCurrentPosition(success, error);

success는 성공 시 콜백, error는 실패 시 콜백 함수명을 넣어주면 된다.

나는 하기와 같이 콜백함수를 선언해놨다.

function success(pos) {
	var crd = pos.coords;

// 	console.log('Your current position is:');
// 	console.log(`Latitude : ${crd.latitude}`);
// 	console.log(`Longitude: ${crd.longitude}`);
// 	console.log(`More or less ${crd.accuracy} meters.`);

	var sLat  = `${crd.latitude}`;
	var sLng  = `${crd.longitude}`;
	
	// indexM.jsp에 함수 호출
	window.fn_location(sLat, sLng);
	
}

function error(err) {
	console.warn(`ERROR(${err.code}): ${err.message}`);

}

pos.coords.latitude 는 위도값, pos.coords.longitude는 경도값을 반환한다.
반환값을 바로 alert로 띄워주면 위도, 경도 값을 확인할 수 있다.

나는 여기서 변수에 위,경도 값을 받아서 도로명 혹은 구주소로 변환하고자 했다.

단순히 위도, 경도값을 확인하는 형태로는 사용법이 매우 간단한데, 사내에서 단순 html, jsp가 아닌 넥사크로 ui툴을 이용하여 개발하고 있어서 JS에서 넥사크로 스크립트에 변수를 넘겨받는 부분이 까다로웠다.
넥사크로 스크립트에서 JS함수를 호출한 다음 넥사크로 변수에 담아서 데이터셋에 담으려고 하니, JS에서 넥사크로변수로 넘겨줄 수가 없었다. (아마도 JS내부 변수로만 인지하는 것 같았다.)
그래서 해결한 방법이 상위에 window객체를 이용하여 전달하도록 했다!
최상위 페이지에 함수를 선언하여 JS안에서 그 함수를 호출하면서 변수를 parameter로 넘겨주고
그 변수를 상위에서 다시 넥사크로 상위프레임의 함수를 호출하고 넥사크로 전역변수로 값을 넘겨주는 형태로 구현했다.
간단히 설명하자면
JS > window 함수 호출(위도, 경도값 전달) > 넥사크로 함수 호출 (위도, 경도값 전달) > 넥사크로 전역 변수에 위도, 경도값 전달 > 최초 JS로 호출한 페이지 뷰 위치에 선언되어있는 콜백함수 호출!
휴.. 값 넘겨받는 과정이 너무 복잡했다.. 도움을 받아서 해결 ㅠㅠ
요렇게 하면 JS로 받아온 위도, 경도 값을 넘겨받아서 데이터셋에 저장할 수 있다!
단순 api는 window객체 얘기 나오기 전까지만 참고하시면 간단하실듯 합니다.

 

<추가>

Geolocation api를 IE에서 사용할 때 문제가 몇 가지 있었다.

위에 적어놓은 내용처럼 우선 `${crd.latitude}` 와 같은 표현을 사용했는데,  `기호는 IE에서 인식이 되지 않는다!!!

갑자기 IE브라우저에서 작성한 화면이 뜨지 않고 eval script error가 떠서 삽질했다...

 

그리고 두번째, IE 브라우저에서는 Geolocation api를 통하여 위도, 경도 값을 가져오지 못한다. 

나같은 경우에는 error code : 1 인 권한없음 에러가 발생했다. 물론 크롬이나 EDGE에서는 첫번째 기호도 그렇고 위도, 경도값 가져오는 부분도 문제없이 잘 돌아간다! 

아무리 자료를 찾아봐도 나오질 않아서 헤매는 다른 사람들은 참고할 수 있었으면 좋겠다.

 

다른 개발자들도 마찬가지겠지만... IE 빨리 사라졌으면.. ^^

 

참고한 사이트들 : https://developerjal.tistory.com/entry/Java-Kakao-map-%EC%B9%B4%EC%B9%B4%EC%98%A4%EB%A7%B5-%EB%A1%9C%EC%BB%AC-API-%EC%A2%8C%ED%91%9C%EA%B2%BD%EB%8F%84-%EC%9C%84%EB%8F%84%EB%A1%9C-%EC%A3%BC%EC%86%8C-%EB%B3%80%ED%99%98%ED%95%98%EA%B8%B0REST-API

[Java] Kakao map 카카오맵 로컬 API 좌표(경도, 위도)로 주소 변환하기(REST API)

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

Geolocation API - Web API | MDN

https://www.w3.org/TR/geolocation/

Geolocation API

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-Geolocation-API%EB%A1%9C-%F0%9F%97%BA%EF%B8%8F-%EC%9C%84%EB%8F%84-%EA%B2%BD%EB%8F%84-%EC%96%BB%EA%B3%A0-%E2%9B%85-%EB%82%A0%EC%94%A8-%EC%98%A8%EB%8F%84-%EC%A0%95%EB%B3%B4%EB%A5%BC-%EC%96%BB%EC%96%B4%EC%98%A4%EA%B8%B0

[JS] 📚 Geolocation API로 🗺️ 위도, 경도 얻고 ⛅ 날씨, 온도 정보를 얻어오기