마카로닉스

1764 No

★api무료 - ip 주소로 국가 코드 가져오기, 접속 위치에 따른 경도 위도값 가져오기, 경도 위도 좌표값으로 상세 주소 가져오기

2021-10-06 16:58:19 By 라이트 0 2502 댓글수 7 포스트 하기

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

구글 맵은 유료이지만,

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

참조 : 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>

jquery