리액트 geolocation으로 내 위치 좌표값 가져오기

 

처음에는 너무 신기했다. 내가 있는 위치를 좌표값으로 어떻게 가져오지??

 

주위에 있는 유/무선 공유기, 휴대전화 기지국, 각종 네트워크 장비들로부터 획득한 위치 정보 데이터를 사용해서 자신의 위치를 계산해준다고 한다. 그래서 내가 있는 곳의 네트워크 또는 통신 상태에 따라서 위치 정보가 부정확할 수 있다고 합니다. 물론 단말기에 GPS 모듈이 있는 경우에는 비교적 정확할 것이다.

 

 

아래는 geolocation을 사용하는 방법이다.

 

내 위치를 좌표값으로 가져오기 위해서 위와 같은 함수를 불러온다. 그냥 복붙해서 사용하면된다.

navigator.geolocation.getCurrentPosition(success, error, options);

 

 

위의 (success, error, options) 세 가지 인자값을 아래와 같이 정의해주면 된다. 이 부분은 상황에 맞게 바꾸어 써도 된다.

  //아래는 네비게이터를 실행할 때, 넣어주는 옵션
  const options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  };

  //내 위치를 불러오는 것에 성공했을 때, 실행되는 함수
  function success(position) {
    //현재 위치를 state값으로
    SetMyaddress({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
    });
  }
  //불러오지 못했을 때 실행되는 함수.
  function error(err) {
    console.warn("ERROR(" + err.code + "): " + err.message);
  }

 

 

아래는 내 위치를 좌표값으로 불러오는 전체 코드이다.

  const options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  };

  //내 위치를 불러오는 것에 성공했을 때 , 실행되는 함수
  function success(position) {
    //현재 위치를 state값으로
    SetMyaddress({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
    });
  }
  //불러오지 못했을 때 실행되는 함수.
  function error(err) {
    console.warn("ERROR(" + err.code + "): " + err.message);
  }
  
  useEffect(()=>{
    navigator.geolocation.getCurrentPosition(success, error, options);
  },[])

첫 랜더링시에, useEffect를 실행하여 내 위치의 좌표값을 Myaddress라는 state값에 넣어준다.

 

 

 

-내 위치의 좌표값을 알아내어 찾고자 하는 주소의 좌표값 사이의 거리를 계산해 가까운 순서대로 나열할 수 있다.

 

---

아래는 좌표값을 다루는 라이브러리 geolib이다.

https://www.npmjs.com/package/geolib