back

  • person_pin
  • calendar_today
  • remove_red_eye

[내 아이피 주소] IP 주소확인하기 / IP 주소로 지도표시하기

페이지 정보

작성자 webpaper 댓글 0건 조회 991회 작성일 19-02-26 11:16

본문

며칠을 싸움하다,,, 겨우 이 정도 수준으로 완성한 내 아이피 주소보기
 

 

일단 기능은 이렇다. 


# 현재 접속자의 IP 주소를 보여준다.

# 그 IP 주소를 바탕으로 위도/경도 값을 표출한다. 

# 위도 경도 값을 바탕으로 지도를 표출한다. (네이버지도) 


일단 IP 주소를 가져오는 코드 


echo $_SERVER['REMOTE_ADDR'];


이 코드로 공인 IP 주소를 가져온다. 

IP주소로 위치값 가져오기 

이 경우 본인의 접속 IP로 geolocation을 이용해 위치값을 가져올 수 있다. 

관련해서 참고한 내용은 아래 링크에서 확인 가능하다. 

 

 
문제는 크롬에서는 https 에서면 이 기능을 사용할 수 있다. 

그 와 관련한 내용은 아래 링크에서 확인할 수 있다. 
 

 

 
무튼 그렇게 하여 나의 홈페이지는 http 이기 때문에, 

브라우저별로 차이를 두었다. 

크롬에서는 IP주소를 사용해 위치값을 전달해주는 API를 사용하고, 

익스와 엣지에서는(사실 크롬을 제외한 다른 브라우저이지만, 익스와 엣지외에는 테스트를 아직 안했다.)

IP 주소로 위치값을 전달하는 API는 아래 링크에서 확인 할 수 있다. 
 

 

 

	function getUrl(){
		var apiKey = '발급받은키';
		var ipAdd = 'IP 주소';
		var regUrl = 'http://api.ipstack.com/'+ipAdd+'?access_key='+apiKey+'&format=1';

		$.ajax({
			type:"POST",
			url:regUrl,
			dataType : "json",
			success: function(json){

				console.log(json); // 리턴받은 json
				console.log(json.country_name); // 국가이름
				console.log(json.latitude); // 위도
				console.log(json.longitude); // 경도
				console.log(json.region_name); // 지역이름
				console.log(json.location.country_flag); // 국기 이미지
				
			},
			error: function(xhr, status, error) {
				alert(error);
			}  
		});
	}


아이피 주소에 따라 지역이름과 국기까지 제공하는 API라 꾀 실용성이 높고, 무료이다.


그리고 마지막으로,, 

위도와 경도값을 받아와서, 네이버지도로 뿌려준다. 

네이버 지도가 뭐가 많이 바뀌어서,, 사용하기가 복잡했다. 이 부분은 추후 다시 포스팅하겠다. 
 

 

 

여차 저차 위의 소스들을 참고하여, 만들게 되었다. 

일단 단점은 geolocation을 사용할 수 없는 크롬에서는 위치 값이 애매하게 나온다. 

익스와 엣지에서는 꾀 정확하게 위치를 잡는데,, (https 적용할까 말까 심히 고민 중) 

그리고 사실 이런 기능을 꾀 정확하게 지원해주는 사이트들이 많다. 

암튼 시험삼아 공부삼아 해본것이니.. 이정도에서 만족! 

추후 디테일한 작업과정을 공유해보겠다. 

그외 활용 방안까지도,,