[자바스크립트] 접속자의 위도와 경도 위치 구하기
Chrome 브라우저 사용자 기준으로, 접속 위치의 경도와 위도 위치를 구할 수 있는 JS 코드는 다음과 같다.
<script>
function onGeolocationSuccess(position) {
// 좌표 출력
console.log("lat: " + position.coords.latitude + ", lon: " + position.coords.longitude);
}
function onGeolocationFail(error) {
// 에러 출력
console.log("Error Code: " + error.code + ", Error Description: " + error.message);
}
if (navigator.geolocation)
{
// 정확한 위치 사용
// 캐시 사용 안함
// timeout 10초 (10000ms)
var positionOptions = {
enableHighAccuracy: true,
maximumAge: 0,
timeout: 10000
};
navigator.geolocation.getCurrentPosition(onGeolocationSuccess,onGeolocationFail,positionOptions);
}
</script>
이 코드가 구동되려면, 브라우저 설정에서 사용자 위치 수집에 관한 설정이 미리 되어있어야 한다.
https://support.google.com/chrome/answer/142065?co=GENIE.Platform%3DDesktop&hl=ko
위치 수집에 대한 설정이 되어있다 하더라도 Chrome 브라우저는 보안상의 이유로 접속할 때마다 위치 수집에 대한 사용자의 동의를 얻는다.
JS 코드를 실행하여 console에서 취득한 결괏값은 다음과 같다.
lat: 3x.xxxx372, lon: 12x.xxxxxx99999999
저 값을 paramter로 하여 근방에 제일 가까운 백화점 2군데를 찾는 웹 서비스를 호출해보았다.
[
{
"distance": 0.19250201779169512,
"location": {
"type": "node",
"id": 4344145030,
"lat": 37.3850927,
"lon": 127.1231018,
"tags": {
"addr:city": "성남시 (Seongnam)",
"addr:housenumber": "42",
"addr:postcode": "13591",
"addr:street": "황새울로360번길 (Hwangsaeul-ro 360beon-gil)",
"name": "AK플라자 분당",
"name:en": "AK Plaza",
"name:ja": "AKプラザ 盆唐店",
"name:ko": "AK플라자 분당점",
"shop": "department_store",
"website": "http://www.akplaza.com/main.do"
}
}
},
{
"distance": 1.0011775652716726,
"location": {
"type": "node",
"id": 4350141121,
"lat": 37.3927998,
"lon": 127.1119913,
"tags": {
"addr:city": "성남시 (Seongnam)",
"addr:housenumber": "20",
"addr:postcode": "13529",
"addr:street": "판교역로146번길",
"name": "현대백화점 판교점",
"name:en": "Hyundai Department Store Pangyo Branch",
"name:ja": "現代百貨店 板橋店",
"name:ko": "현대백화점 판교점",
"phone": "+82 31 5170 2233",
"shop": "department_store",
"website": "http://www.ehyundai.com/newPortal/DP/DP000000_V.do?branchCd=B00148000"
}
}
}
]
참고로 한반도의 위도, 경도 범위는 대략 이렇다.
위도(북위): 33 ~ 43
경도(동경): 124 ~ 132
카카오의 지도 API에는 위도, 경도 좌표를 주소로 변환해 주는 훌륭한 서비스가 있다.
이를 연동하면 다양한 개인화 페이지 구현이 가능하다.
https://apis.map.kakao.com/web/sample/coord2addr/
