본문 바로가기
공부/Trouble Shooting

자바스크립트로 내 현재 위치 서버에 보내기

by son_i 2023. 9. 11.
728x90

index.jsp에서 내 위치 조회하기를 누르면 현재 x, y좌표가 distupdate로 넘어가게 설정

 

LAT: <input type="text" id="x" value="0.0">, 
		LNT: <input type="text" id="y" value="0.0">
		<button onclick="calDist_()">내 위치 가져오기</button> 
		<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
		<script>
    		function calDist_() {
    			var xv = document.getElementById('x').value;
    			var yv = document.getElementById('y').value;
    			console.log(xv);
    			console.log(yv);
    			if(xv == 0 && yv == 0) {
    				var options = {
    			  		 enableHighAccuracy: true,
    			  		timeout: 5000,
    			  		maximumAge: 0
    			  	};

    			  	function success(position) {
    			  		$.ajax({
        	    			url:"distupdate",
        	    			type:'get',
        	    			data: { x: position.coords.latitude, y: position.coords.longitude}
        	    			});
    			  		
    			  	};

    			  	function error(err) {
    			  		console.warn('ERROR(' + err.code + '): ' + err.message);
    			  	};

    			  	navigator.geolocation.getCurrentPosition(success, error, options);
    			}else {
    				console.log(xv);
    	    		$.ajax({
    	    			url:"distupdate",
    	    			type:'get',
    	    			data: { x: xv, y: yv}
    	    		});
    				
    			} 
    			
    		document.getElementById('x').value = xv;
    		document.getElementById('y').value = yv;
    		}

https://wnsdufdl.tistory.com/223

이 블로그 참조

 

geolocation으로 현재위치 받고 카카오 API에 넘겨줘서 주소까지 받아오기

카카오 공식홈페이지를 보고 금방 사용할 수 있을 줄 알았지만 리액트에서 사용하는 예시는 나와있지 않아서 구글의 바다를 오랫동안 헤엄치다 겨우 구현했다. '주소 검색하기' 기능인데, 먼저

wnsdufdl.tistory.com

 

 

geolocation으로 현재위치 받고 카카오 API에 넘겨줘서 주소까지 받아오기

카카오 공식홈페이지를 보고 금방 사용할 수 있을 줄 알았지만 리액트에서 사용하는 예시는 나와있지 않아서 구글의 바다를 오랫동안 헤엄치다 겨우 구현했다. '주소 검색하기' 기능인데, 먼저

wnsdufdl.tistory.com