[javascript] 카카오지도 API + geolocation API로 현재 위치의 주소 찾기

설명은 필요 없고 소스만 바로 붙여서 나오는게 좋겠다면 소스 아래 그대로 복사 붙이기 해서 카카오 API 키값만 기재하면 주소 출력이 됩니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API키값&libraries=services"></script>
<script>
function getAddr(lat,lng){
    let geocoder = new kakao.maps.services.Geocoder();
    let coord = new kakao.maps.LatLng(lat, lng);
    let callback = function(result, status) {
        if (status === kakao.maps.services.Status.OK) {
            console.log(result);
        }
    }
    geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
}
	
function getLocation() {
  if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) {
        //getAddr(위도, 경도);
        getAddr(position.coords.latitude , position.coords.longitude);
    }, function(error) {
      console.error(error);
    }, {
      enableHighAccuracy: false,
      maximumAge: 0,
      timeout: Infinity
    });
  } else {
    alert('현재 브라우저에서는 geolocation를 지원하지 않습니다');
  }
  return 
}

getLocation();
</script>

주의사항

카카오 API 키값 필요.

HTTPS환경에서만 실행 됨.

 

그래도 안 나온다면 

1. 사이트 정보 보기

2. 위치 권한을 승인

결과물

 

(참고) 정확한 위치는 아니지만 대략적인 위치는 비슷하게 나오거나 조금 떨어질 수 있습니다.

 

 

반응형

 

navigator.geolocation.getCurrentPosition(success, error, [options])

success, error는 콜백함수입니다. 저는 함수 선언하기 귀찮아서 그냥 그대로 함수 만들어서 넣었습니다.

자세한 문서는 아래에서 참고해주세요.

Geolocation.getCurrentPosition() - Web API | MDN

getCurrentPosition의 success에서 콜백 리턴 값을 받으면 위도와 경도를 확인할 수 있습니다.

아래 결과값 참고해주세요.

 

그리고 getAddr(위도, 경도)로 함수를 실행하면 위의 최종 결과물을 얻을 수 있습니다.