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

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

web.paper | 내 아이피 주소확인

내 아이피 주소로 위치확인

http://www.webpaper.kr/ip

 

일단 기능은 이렇다. 

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

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

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

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

echo $_SERVER['REMOTE_ADDR'];

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

IP주소로 위치값 가져오기 

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

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

 

HTML5 - 지오로케이션

HTML5 - 지오로케이션좌표 읽기구글 맵 웹에서는 유료됨 (트래픽이 많으면 돈을 지불해야함) 현재 우리...

https://blog.naver.com/jang_delay/220730675979

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

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

 

http 프로토콜 사용시 HTML5 Geolocation API 등 위치정보 사용제한에 대하여

크롬과 사파리에서 사용자의 위치정보를 가져올 수 없었던 사내 이슈에 대해 조사하여 동료들과 이메일로 공유했던 적이 있었다. 자바스크립트 개발자라면 꽤 이미 알고계신분들이 많을것이라 약간 뒷북이라는 느낌이 없지 않아 있지만 좀 더 그 내막과 맥락에…

https://medium.com/witinweb/http-%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C-%EC%82%AC%EC%9A%A9%EC%8B%9C-html5-geolocation-api-%EB%93%B1-%EC%9C%84%EC%B9%98%EC%A0%95%EB%B3%B4-%EC%82%AC%EC%9A%A9%EC%A0%9C%ED%95%9C%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC-e024772cc280

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

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

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

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

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

 

ipstack - Free IP Geolocation API

Locate website visitors for free using ipstack - a free, real-time IP address to location JSON API and database service supporting IPv4 and IPv6 lookup.

https://ipstack.com/

 

	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라 꾀 실용성이 높고, 무료이다.


그리고 마지막으로,, 

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

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

 

NAVER Maps API v3

NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.

https://navermaps.github.io/maps.js

 

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

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

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

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

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

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

그외 활용 방안까지도,,