JS Geolocation 완전 정리

 

 

Geolocation API

JS Geolocation 완전 정리

getCurrentPosition으로 위치를 읽고 OpenStreetMap iframe과 링크로 연결하는 흐름을 정리합니다.

0 오늘 분석할 코드

<div id="msg">이곳에 위치 정보 출력</div>
<iframe id="map" width="425" height="350"></iframe>
<a id="bigmaplink" target="_blank">새 창에 큰 지도 보기</a>
<script>
if (navigator.geolocation)
  navigator.geolocation.getCurrentPosition(success);
else
  alert("지원하지 않음");

function success(position) {
  let lat = position.coords.latitude;
  let lon = position.coords.longitude;
  let acc = position.coords.accuracy;
  lat = lat.toPrecision(6);
  lon = lon.toPrecision(6);
  map.src = "https://www.openstreetmap.org/export/embed.html?bbox=" +
    (parseFloat(lon)-0.01) + "%2C" + (parseFloat(lat)-0.01) + "%2C" +
    (parseFloat(lon)+0.01) + "%2C" + (parseFloat(lat)+0.01);
}
</script>

navigator.geolocation브라우저 위치 정보 API 진입점입니다.

getCurrentPosition()현재 위치를 한 번 요청합니다.

position성공 콜백으로 전달되는 위치 정보 객체입니다.

coords위도, 경도, 정확도 같은 좌표 정보입니다.

latitude위도 값입니다.

longitude경도 값입니다.

accuracy위치 정확도이며 meter 단위입니다.

iframe외부 지도 페이지를 문서 안에 표시합니다.

---

1 Geolocation 예제의 목적

Geolocation 예제는 브라우저가 현재 위치를 받아 위도, 경도, 정확도를 출력하고, 그 좌표를 OpenStreetMap iframe 주소에 넣어 지도로 보여 주는 흐름입니다.

• navigator.geolocation 지원 여부를 확인합니다.
• getCurrentPosition(success)로 현재 위치를 요청합니다.
• success 함수에서 position.coords 값을 읽습니다.
• 지도 iframe src와 큰 지도 링크 href를 좌표로 조립합니다.

---

2 getCurrentPosition

getCurrentPosition은 위치 정보를 요청하고, 성공하면 콜백 함수에 position 객체를 전달합니다. 사용자는 브라우저 권한 요청을 허용해야 실제 위치를 받을 수 있습니다.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  alert("지원하지 않음");
}

---

3 position.coords

속성	의미	원문 사용
latitude	위도	lat 변수
longitude	경도	lon 변수
accuracy	정확도, meter 단위	acc 변수
altitude	고도	예제에서는 사용하지 않음

---

 

반응형

 

4 toPrecision 사용

위도와 경도는 소수점 이하가 길 수 있습니다. 원문은 toPrecision(6)을 사용해 유효 숫자 6자리로 줄입니다. 이 결과는 문자열이므로 이후 계산에는 parseFloat가 필요합니다.

1. position.coords.latitude를 lat에 저장합니다.
2. position.coords.longitude를 lon에 저장합니다.
3. lat = lat.toPrecision(6)으로 표시 길이를 줄입니다.
4. 지도 bbox 계산 때 parseFloat(lon), parseFloat(lat)를 사용합니다.

---

5 위치 출력 문자열

success 함수는 현재 시간, 현재 위치, 정확도를 문자열로 만들어 msg 영역에 출력합니다. now.toUTCString은 UTC 기준 날짜 문자열을 만듭니다.

let text = "현재 시간 " + now.toUTCString() + "<br>";
text += "현재 위치 (위도 " + lat + "°, 경도 " + lon + "°)<br>";
text += "정확도 " + acc + "m<br>";

---

6 HTTPS 제한과 샘플 위치

Geolocation은 보안상 HTTPS 환경에서 동작하는 것이 기본입니다. 원문은 HTTPS가 아닌 환경을 고려해 서울 성북구 낙산공원 좌표를 sample 객체로 만들어 success(sample)을 호출합니다.

학습용으로 샘플 좌표를 넣으면 배포 환경이 아니어도 출력 화면과 지도 생성 흐름을 확인할 수 있습니다.

---

7 setTimeout 샘플 호출

setTimeout("success(sample)", 200)은 0.2초 뒤 sample 객체를 success 함수에 전달합니다. 문자열 실행 방식보다 setTimeout(function(){ success(sample); }, 200) 형태가 더 명확합니다.

• 실제 위치 요청이 실패해도 샘플 출력이 보입니다.
• 샘플 객체는 position과 비슷한 coords 구조를 가집니다.
• 위도, 경도, 정확도를 Number 값으로 넣습니다.
• 실전에서는 error 콜백으로 실패를 처리합니다.

---

8 OpenStreetMap iframe

지도 예제는 iframe의 src를 OpenStreetMap embed 주소로 설정합니다. bbox는 표시할 지도의 왼쪽 아래와 오른쪽 위 좌표 범위를 의미합니다.

부분	의미
lon - 0.01	왼쪽 경도
lat - 0.01	아래쪽 위도
lon + 0.01	오른쪽 경도
lat + 0.01	위쪽 위도

---

9 큰 지도 링크

bigmaplink.href에는 OpenStreetMap의 일반 지도 URL을 넣습니다. #map=zoom/lat/lon 형식으로 줌 레벨과 중심 좌표를 지정합니다.

let zoom = 15;
maplink.href = "https://www.openstreetmap.org/#map=" + zoom + "/" + lat + "/" + lon;

---

10 권한 거부 처리

원문은 success 콜백만 사용하지만, 실제 코드에서는 사용자가 위치 권한을 거부할 수 있습니다. getCurrentPosition(success, error) 형태로 실패 콜백을 넣는 것이 좋습니다.

상황	처리
권한 거부	안내 문구 출력
위치 확인 실패	샘플 좌표나 기본 지도 표시
시간 초과	다시 시도 버튼 제공
미지원 브라우저	지원하지 않음 메시지 출력

---

11 개선 과제

과제	목표
error 콜백 추가	권한 거부와 실패를 구분합니다.
watchPosition 사용	위치 변화 추적을 실험합니다.
지도 줌 선택	사용자가 zoom 값을 바꾸게 합니다.
샘플 위치 목록	여러 도시 좌표를 선택해 지도에 표시합니다.
좌표 복사 버튼	lat, lon 값을 클립보드에 복사합니다.

---

12 검증 체크리스트

• HTTPS 또는 localhost 환경에서 실제 위치 요청을 테스트합니다.
• navigator.geolocation 지원 여부를 먼저 확인합니다.
• success 함수가 position.coords 구조를 기대한다는 점을 확인합니다.
• toPrecision 이후 계산에는 parseFloat를 사용합니다.
• iframe src의 bbox 좌표 순서를 확인합니다.
• 큰 지도 링크가 target="_blank"로 열리는지 확인합니다.

---

13 실전 점검 순서

1. 환경 확인: HTTPS 또는 localhost인지 먼저 확인합니다.
2. 권한 확인: 브라우저 위치 권한 요청을 허용했는지 봅니다.
3. 좌표 확인: latitude, longitude, accuracy가 success 함수 안에서 출력되는지 봅니다.
4. 형 변환 확인: toPrecision 이후 지도 계산에는 parseFloat를 적용합니다.
5. 지도 확인: iframe src와 새 창 링크 href가 올바른 좌표를 포함하는지 봅니다.

위치 정보 예제는 권한, 보안 환경, 지도 URL 조립 중 하나만 틀려도 화면이 비어 보일 수 있습니다.

• 권한을 거부한 뒤에는 브라우저 사이트 설정에서 다시 허용해야 할 수 있습니다.
• 지도 iframe이 비어 있으면 src 문자열을 콘솔에 출력해 직접 열어봅니다.
• 샘플 좌표와 실제 좌표가 동시에 출력되면 setTimeout 테스트 코드를 분리합니다.
• 정확도가 너무 큰 경우 GPS가 아닌 네트워크 기반 위치일 수 있습니다.
• 개인 위치를 저장하거나 전송할 때는 사용자 동의와 보관 범위를 분명히 해야 합니다.

---

M 자주 하는 실수

실수	문제	해결
HTTPS가 아닌 곳에서 테스트	위치 요청이 제한될 수 있습니다.	HTTPS 또는 localhost에서 확인하고 샘플 좌표를 준비합니다.
error 콜백 생략	권한 거부나 실패 원인을 알기 어렵습니다.	getCurrentPosition(success, error)를 사용합니다.
toPrecision 결과를 숫자로 착각	문자열이라 계산이 어색해질 수 있습니다.	bbox 계산 전에 parseFloat를 사용합니다.
bbox 좌표 순서 오류	지도 영역이 엉뚱하게 잡힙니다.	lon/lat 순서와 +/- 범위를 확인합니다.
사용자 권한을 고려하지 않음	위치 정보는 민감한 데이터입니다.	왜 필요한지 화면에서 명확히 안내합니다.

핵심 한 줄 요약

geogetCurrentPosition은 성공 콜백으로 position.coords를 전달합니다.

mapOpenStreetMap iframe은 bbox 좌표를 조립해 현재 위치 주변을 표시합니다.

securityGeolocation은 권한과 HTTPS 조건을 함께 고려해야 합니다.

Tags

#JavaScript#Geolocation#getCurrentPosition#latitude#longitude#OpenStreetMap#iframe#position#coords#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, Geolocation, getCurrentPosition, latitude, longitude, OpenStreetMap, iframe, position, coords, 티스토리