[JavaScript] 자바스크립트에서 위치 정보 읽어오기

241_자바스크립트에서 위치 정보 읽어오기

[적용]

• 지도에 현재 위치를 표시하고 싶을 때

---

[문법 1]

메소드	의미	반환
navigator.geolocation.getCurrentPosition(성공시함수, 실패시함수)	위치 정보 가져오기	없음

[문법 2]

속성	의미	타입
position.coords.latitude	위도	숫자
position.coords.longitude	경도	숫자
position.coords.accuracy	위도, 경도의 오차	숫자

---

[내용]

GPS는 지도 앱과 SNS 앱 등에서 위치 정보를 확인할 때 사용하는 센서다.

Geolocation API로 액세스 할 수 있으며,

navigator.geolocation.getCurrentPosition()을 사용해 위치 정보를 가져올 수 있다.

position.coords.accuracy 속성은 위도와 경도의 오차를 나타내는 것으로

가져온 위도, 경도의 데이터와 실체 위치의 오차 범위를 m 단위로 나타낸다.

 

JavaScript                                                                                                                                                          main.js

// 현재 위치 가져오기
navigator.geolocation.getCurrentPosition(geoSuccess, getError);

// 가져오기 성공
function getSuccess(position) {
  // 위도
  const lat = position.coords.latitude;
  // 경도
  const lng = position.coords.logitude;
  // 위도 경도 오차(m)
  const accuracy = Math.floor(position.coords.accuracy);
}

// 가지오기 실패(거부)
function getError() {
  alert('Geolocation Error');
}

 

---

[예시]

현재 위치를 나타내는 샘플을 확인해 보자.

브라우저로 액세스하여 위치 정보 제공을 허락하면 현재의 위도, 경도를 가져와 구글 지도에 위치를 표시한다.

지도는 구글 지도 API를 사용한다.

 

HTML                                                                                                                                                              index.html

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp">
</script>

JavaScript                                                                                                                                                          main.js

// 현재 위치 가져오기
navigator.geolocation.getCurrentPosition(geoSuccess, getError);

function geoSuccess(position) {
  // 위도
  const lat = position.coords.latitude;
  // 경도
  const lng = position.coords.longitude;
  
  setMap(lat, lng);
}

function setMap(lat, lng) {
  // 위도, 경도 설정
  const latlng = new google.maps.LatLng(lat, lng);
  
  // 표시 추가
  const marker = new google.maps.Marker({
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: latlng
  });
}

 

GPS는 외부 환경에 영향을 많이 받기 때문에 완벽한 위치를 검출해내기는 어렵다.

실내와 지하에서는 GPS 신호를 받기가 어려우므로 유선으로 위치 정보를 가져온다(스마트폰 설정이 필요).

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김