JQuery

 

구글 맵은 유료이지만,

다음은 무료로 사용 가능한 간단한  API 이다

 

[JQuery]JQuery를 이용한 접속 국가 Ip 체크

 

 

 참조  : https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation 

<div style="display: none;">    
<button id = "find-me">Show my location</button>
<p id = "status"></p>
<a id = "map-link" target="_blank"></a>

</div>

<script>
var openstreetmap_latitude="";
var openstreetmap_longitude="";
geoFindMe();
function geoFindMe() {

	  const status = document.querySelector('#status');
	  const mapLink = document.querySelector('#map-link');

	  mapLink.href = '';
	  mapLink.textContent = '';

	  function success(position) {
	    const latitude  = position.coords.latitude;
	    const longitude = position.coords.longitude;

	   status.textContent = '';
	    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
	    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
	    openstreetmap_latitude=latitude;
	    openstreetmap_longitude=longitude;
	    console.log("latitude :   "+latitude);
	  }

	  function error() {
	    status.textContent = 'Unable to retrieve your location';
	  }

	  if(!navigator.geolocation) {
	     status.textContent = 'Geolocation is not supported by your browser';
	  } else {
	    status.textContent = 'Locating…';
	    navigator.geolocation.getCurrentPosition(success, error);
	  }

}


function openstreetmapGetAddress() {
	$.ajax({
		url: 'https://nominatim.openstreetmap.org/reverse',
		data: {
			lat: openstreetmap_latitude,
			lon: openstreetmap_longitude,
			format: 'json'
		},
		beforeSend: function (xhr) {
			xhr.setRequestHeader('User-Agent', 'com.form.parking.violation v0.5');
		},
		dataType: 'json',
		type: 'GET',
		async: true,
		crossDomain: true
	}).done(function (res) {
		console.log(res.address);		
		$("#ulocation").val(res.address.road);
	}).fail(function (error) {
		console.error(error);
	})
}
document.querySelector('#find-me').addEventListener('click', geoFindMe);
</script>
    
    

 

 

 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


	<script>

		getT();

		function getT() {
			$.ajax({
				url: 'https://nominatim.openstreetmap.org/reverse',
				data: {
					lat: 38.748666,
					lon: -9.103002,
					format: 'json'
				},
				beforeSend: function (xhr) {
					xhr.setRequestHeader('User-Agent', 'com.form.parking.violation v0.5');
				},
				dataType: 'json',
				type: 'GET',
				async: true,
				crossDomain: true
			}).done(function (res) {
				console.log(res.address);
			}).fail(function (error) {
				console.error(error);
			})
		}

	</script>

</head>

<body>




</body>

</html>

 

 

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

하늘의 도(道)의 운행은 인간에 있어 가장 중요한 가르침이다. -예기

댓글 ( 0)

댓글 남기기

작성