brunch

You can make anything
by writing

C.S.Lewis

by 테크유람 Mar 05. 2019

[자바스크립트] 접속자의 위도와 경도 위치 구하기


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/










브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari