Geolocation을 활용한 사용자 위치 표시 (카카오맵 API)

이 포스팅은 내가 울산코로나맵을 기획 제작하는 과정에서 가장 애먹었던 부분이다.
사실 geolocation자체가 원래 잘 작동하지 않는 놈이다... 지원하지 않는 브라우저 환경도 많으며 보안 이슈로 https가 아닌 http에서는 지원하지 않는다.

때문에 현재 제작된 코로나맵들의 geolocation 역시 말을 잘 안 듣는 것을 볼 수 있다.
그나마 오류를 줄여본 코드는 다음과 같다.
먼저 gps_check 함수를 통해 시작하자마자 gps를 통해 사용자의 위치에 접근하고 허용 시, 사용자의 위치를 반환하여 저장한다.

var gps_use = null; //gps의 사용가능 여부
var gps_lat = null; // 위도
var gps_lng = null; // 경도
var gps_position; // gps 위치 객체

gps_check();
// gps가 이용가능한지 체크하는 함수이며, 이용가능하다면 show location 함수를 불러온다.
// 만약 작동되지 않는다면 경고창을 띄우고, 에러가 있다면 errorHandler 함수를 불러온다.
// timeout을 통해 시간제한을 둔다.
function gps_check(){
    if (navigator.geolocation) {
        var options = {timeout:60000};
        navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
    } else {
        alert("GPS_추적이 불가합니다.");
        gps_use = false;
    }
}


// gps 이용 가능 시, 위도와 경도를 반환하는 showlocation함수.
function showLocation(position) {
    gps_use = true;
    gps_lat = position.coords.latitude;
    gps_lng = position.coords.longitude;
}


// error발생 시 에러의 종류를 알려주는 함수.
function errorHandler(error) {
    if(error.code == 1) {
        alert("접근차단");
    } else if( err.code == 2) {
        alert("위치를 반환할 수 없습니다.");
    }
    gps_use = false;
}

 

 

이제 카카오맵 API를 활용하여 사용자의 위치를 맵에 띄워보자.
gps_check 함수를 활용하여 사용자 위치에 접근을 허용하였다면, gps_tracking 함수에서는
1. map.panTO 함수를 활용하여 사용자 좌표에 부드럽게 이동.
2. currentOverlay라는 마커를 사용자의 위도와 경도 좌표에 찍어준다.

만약 허용하지 않은 경우는,
1. 접근 차단버튼을 사용자가 누른 경우 다시 새로고침하여 접근을 허용하기를 부탁하고.
2. 아닌 경우는 geolocation이 말을 잘 안 듣는 경우라고 생각하고 이를 알리고 다시 gps_check() 함수를 호출하여 gps 위치를 반환받는다.

function gps_tracking(){
    if (gps_use) {
        map.panTo(new kakao.maps.LatLng(gps_lat,gps_lng));
        var gps_content = '<div><img class="pulse" draggable="false" unselectable="on" src="https://ssl.pstatic.net/static/maps/m/pin_rd.png" alt=""></div>';
        var currentOverlay = new kakao.maps.CustomOverlay({
            position: new kakao.maps.LatLng(gps_lat,gps_lng),
            content: gps_content,
            map: map
        });
        currentOverlay.setMap(map);
    } else {
      alert("접근차단하신 경우 새로고침, 아닌 경우 잠시만 기다려주세요.");
      gps_check();
    }
}

이를 적용하여 지도를 호출해보면 다음과 같다.

geolocation 을 활용한 현재 위치 표시

 

끝.