현재 위치를 지도 위에 표시하는 기능 만들기(기본마커 + CSS 적용)

현재위치 버튼을 누르면 현재위치가 나타나게 하는 기능을 만든다.

jQuery 라이브러리를 통해서 구현을 해본다.

 

-jQuery란?

웹사이트에서 자바스크립트를 쉽게 사용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리

->클라이언트쪽의 이벤트들을 조금 더 쉽게 작성할 수 있도록 고안된 라이브러리

 

if ("geolocation" in navigator) {
	navigator.geolocation.getCurrentPosition(function(position) {
    	const lat = position.coords.latitude; #현재위치 위도가 담긴다.
    	const lng = position.coords.longitude; #현재위치 경도가 담긴다.
    	const latlng = new naver.maps.LatLng(lat, lng); #네이버지도 위에 사용할 수 있도록 포맷 변경
    	marker = new naver.maps.Marker({
    		map: map,
    		position: latlng;
    	});
	});
} else {
	alert("위치정보 사용 불가능")}
}

현재 위치 마커에 CSS를 적용시켜 아래와 같이 나타내었다.(+애니메이션 적용까지)