위치 정보 가져오기 (위도,경도) & 카카오 지도 API - 지도활용 Part1

  Geolocation API

Geolocation API는 사용자의 위치정보에 액세스할 수 있는 권한을 요청한다.

브라우저에서 기본적으로 제공되는 기능이라 사용이 용이하다. 

(지원하지 않는 브라우저도 있다.)

 

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        (position) => {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
			
            console.log('위도:::'+latitude);
            console.log('경도:::'+longitude);
        },
        (error) => {
            alert('위치 정보를 가져오는 데 실패했습니다.');
        }
    );
} else {
    alert('이 브라우저는 Geolocation을 지원하지 않습니다.');
}

 

 

해당 소스를 카카오 지도 API를 사용하여 중심좌표에 저장해보자.

<div class="map" id="map" style="width:500px;height:400px;">지도영역</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=서비스키"></script> 
<script type="text/javascript">
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
        (position) => {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            
			var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
			var options = {
				center: new kakao.maps.LatLng(latitude, longitude), //지도의 중심좌표.
				level: 3 
			};

			var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
			// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
			var zoomControl = new kakao.maps.ZoomControl();
			map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

			//지도에 마커를 표시합니다
			var marker = new kakao.maps.Marker({
				position: new kakao.maps.LatLng(latitude, longitude)
			});
			marker.setMap(map);
        },
        (error) => {
            alert('위치 정보를 가져오는 데 실패했습니다.');
        }
    );
} else {
    alert('이 브라우저는 Geolocation을 지원하지 않습니다.');
}
</script>

 

카카오지도에 중심좌표를 현재위치로 설정하고 마커 표시를 하였다.

 

part2에서 openAPI 를 활용하여 주변 관광지를 지도에 표시하는것까지 다뤄보겠다.