watchPosition 호출 취소란?
HTML5 Geolocation API의 clearWatch() 메서드는 현재 진행 중인 watchPosition() 호출을 취소하는 데 사용됩니다. 이 메서드가 실행되면 해당 watchPosition은 더 이상 기기의 현재 지리적 위치(위도·경도)에 대한 업데이트를 받아오지 않습니다.
watchPosition()을 호출하면 고유한 watch ID가 반환되며, clearWatch()는 바로 이 watch ID를 인자로 전달받아 해당 감시 작업만 정확히 중단시킵니다. 따라서 여러 개의 watchPosition이 동시에 실행되고 있더라도 각각의 ID를 사용해 개별적으로 취소할 수 있습니다.
전체 예제 코드
다음 예제는 위치 업데이트 감시를 시작하고, 버튼 클릭 한 번으로 이를 중지하는 방법을 보여줍니다.
<!DOCTYPE HTML>
<html>
<head>
<script>
var watchID;
var geoLoc;
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert("Latitude : " + latitude + " Longitude: " + longitude);
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
}
else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocationUpdate(){
if(navigator.geolocation){
// 타임아웃 60000밀리초(60초)
var options = {timeout:60000};
geoLoc = navigator.geolocation;
watchID = geoLoc.watchPosition(showLocation, errorHandler, options);
}
else{
alert("Sorry, browser does not support geolocation!");
}
}
function stopWatch(){
geoLoc.clearWatch(watchID);
}
</script>
</head>
<body>
<form>
<input type = "button" onclick = "getLocationUpdate();" value = "Watch Update"/>
<input type = "button" onclick = "stopWatch();" value = "Stop Watch"/>
</form>
</body>
</html>
코드 동작 방식
- showLocation(position) – 위치 업데이트가 수신될 때마다 기기의 위도(latitude)와 경도(longitude)를 알림창으로 표시합니다.
- errorHandler(err) – 오류 코드에 따라 다른 메시지를 출력합니다. 코드 1은 접근 권한 거부, 코드 2는 위치 정보를 가져올 수 없음을 의미합니다.
- getLocationUpdate() – 브라우저의 geolocation 지원 여부를 확인한 뒤, 타임아웃 60초 옵션과 함께 watchPosition()을 시작하고 반환된 watchID를 변수에 저장합니다.
- stopWatch() – 저장해 둔 watchID를 clearWatch()에 전달하여 위치 감시를 즉시 중단합니다.
이처럼 watchPosition()으로 시작한 위치 추적 작업은 반드시 clearWatch()로 명시적으로 종료해 주어야 불필요한 배터리 소모와 위치 조회를 방지할 수 있습니다.