Geo Location 이용하여 도로명주소 이용 오류

지도/로컬 API
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

안녕하세요.
학업 용 프로젝트 진행 중 있습니다.
위도 경도는 정확하게 geo location으로 불러옵니다. 이 위도 경도를 받아서 도로명주소 API로 찾아오는데 관악구에서 찍었는데 서초구 주소를 불러옵니다.

혹시 위도 경도로 도로명주소 api를 이용하는 것에 대해 문제가 있을까요? 웹으로 동작하고 핸드폰은 삼성 z플립4 크롬브라우저로 실행했습니다.

위도 경도 주소 일시입니다.

|37.4837261|126.9268499|서울 서초구 서초동 1376|2024-06-24 22:13:07|
|37.480942|126.9298042|서울 서초구 서초동 산 29-3|2024-06-24 22:20:31|
|37.4790629|126.9316916|서울 서초구 양재동 산 57-34|2024-06-24 22:24:08|
|37.4776725|126.9347957|서울특별시 서초구 바우뫼로 91|2024-06-24 22:28:17|
|37.4748868|126.9364815|서울 서초구 양재동 127|2024-06-24 22:34:29|
|37.4718155|126.9339183|서울특별시 서초구 태봉로 151|2024-06-24 22:42:25|

2

@dlgudanr123
안녕하세요~
사용하시는 API와, 데이터 샘플을 적어주실 수 있으실까요?

3

사용한 api입니다.
Daum Postcode Service User Guide kakao API 우편번호 서비스

geolocation으로 마커 표시하기 - Kakao 지도 Web API kakao map API geolocation

샘플데이터 입니다.
|37.4837261|126.9268499|서울 서초구 서초동 1376|2024-06-24 22:13:07|
|37.480942|126.9298042|서울 서초구 서초동 산 29-3|2024-06-24 22:20:31|
|37.4790629|126.9316916|서울 서초구 양재동 산 57-34|2024-06-24 22:24:08|
|37.4776725|126.9347957|서울특별시 서초구 바우뫼로 91|2024-06-24 22:28:17|
|37.4748868|126.9364815|서울 서초구 양재동 127|2024-06-24 22:34:29|
|37.4718155|126.9339183|서울특별시 서초구 태봉로 151|2024-06-24 22:42:25|

4

아 넵 감사합니다.

일단 제가 질문글을 착각했는데,
저희 REST API중에 있는
https://developers.kakao.com/docs/latest/ko/local/dev-guide#address-coord
https://developers.kakao.com/docs/latest/ko/local/dev-guide#coord-to-address

이러한 API를 통해 값을 가져오는 중에 잘못된 데이터가 나오는 것으로 이해했느데;;

geolocation, 즉 navigator.geolocation 객체를 이용하신다는 것이지요?

이는 저희가 제공하는 API가 아닌, Native Javascript API로, 결과가 어떻게 떨어지는지는 저희가 제어할 수 없는 부분입니다.

우편번호 서비스의 경우엔 텍스트로 된 검색어만 허용되고, 내려가는 데이터엔 좌표값이 없는데, 우편번호 서비스를 어떠한 방식으로 이용하고 계신지도 설명해 주시면 답변드리도록 하겠습니다.
혹시 가이드 페이지에 있는 “주소를 선택하면 지도와 함께 보여주기” 예제를 참고하셨을까요?

이게 아닌, 저희쪽 API를 이용할때의 이슈라면 좀더 자세히 알려주시기 바랍니다.

5

$(“div[name=‘체크포인트’]”).on(“click”, function() {

	if (navigator.geolocation) {
	    
	    // GeoLocation을 이용해서 접속 위치를 얻어옵니다
	    navigator.geolocation.getCurrentPosition(function(position) {
	        
	    	var latFooter = position.coords.latitude; // 위도
	    	var lonFooter = position.coords.longitude; // 경도
	        console.log(latFooter);
	        console.log(lonFooter);
	    	$('input[name="latitudeOfFooter"]').val(latFooter).trigger('change');
	        $('input[name="longitudeOfFooter"]').val(lonFooter);
	      });
	    
	} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
		let message = 'geolocation을 사용할수 없어요..'
		alert(message);
	}
})//$("img[name='체크포인트']").on("click", function() { 끝
	
$('input[name="latitudeOfFooter"]').on("change",function(){
	let latitudeFooter = $('input[name="latitudeOfFooter"]').val();
	let longitudeFooter = $('input[name="longitudeOfFooter"]').val();
	$.ajax("https://dapi.kakao.com/v2/local/geo/coord2address.json",{
		method : "GET",
		dataType : "json",
		headers : {
			"Authorization" : "KakaoAK [[${restKey}]]",
			"Content-type" : "application/json;charset=UTF-8"
		},
		data : {
			x : longitudeFooter,
			y : latitudeFooter
		},
		success : function(response,status){
			//console.log(response.documents[0].road_address);
			//console.log(response.documents[0].address.address_name);
	    	$('input[name="checkpointAddressOfFooter"]')
	    	.val(response.documents[0].road_address!==null ? response.documents[0].road_address.address_name:response.documents[0].address.address_name)
	    	.trigger('change');
		},
        error: function(xhr, status, error) {
            alert('Error: ' + error);
        }
		
		})
	})//$('input[name="latitudeOfFooter"]').on("change",function(){ 끝
	
	$('input[name="checkpointAddressOfFooter"]').on("change",function(){
		let recordUserId = $('input[name="recordUserIdOfFooter"]').val();
		let latitudeFooter = $('input[name="latitudeOfFooter"]').val();
		let longitudeFooter = $('input[name="longitudeOfFooter"]').val();
		let checkpointAddress = $('input[name="checkpointAddressOfFooter"]').val();
		$.ajax("/timeline/rest/addTimeline",{
			method : "POST",
			dataType : "json",
			headers : {
				"Content-Type" : "application/json; charset = UTF-8",
				"Accept" : "application/json; charset = UTF-8"
			},
			data : JSON.stringify({
	  		  	recordUserId : recordUserId,
	    		latitude : latitudeFooter,
	    		longitude : longitudeFooter,
	    		checkpointAddress : checkpointAddress
			}),
			success : function(response,status){
				alert(JSON.stringify(response));
				console.log(JSON.stringify(response));
			},
    		error: function(xhr, status, error) {
        		alert('Error: ' + error);
    		}

		})
	})//$('input[name="checkpointAddressOfFooter"]').on("change",function(){ 끝

자바스크립트 코드는 이렇게 작성하였습니다. 문제가없는 코드인거 같은데 말씀해주신 주소를 선택하면 지도와 함께 보여주기 예제를 참고하였고 위도 경도는 kakao geolocation으로 불러왔습니다. Native javascript API라는 사실을 알게되어 감사합니다.