테스트 사이트 - 개발 중인 베타 버전입니다

약도스킨 베이스 게시물 주소를 네이버 지도 api 연동하는데 표시가 제대로 안되고있습니다. 채택완료

굼떠 5개월 전 조회 1,552

https://sir.kr/g5_skin/24249?sfl=wr_subject&stx=%EC%95%BD%EB%8F%84

 

해당 소스 참고하여 작업중입니다!

게시물 작성 시 주소도 wr_5필드에 제대로 들어가는데 지도는 뜨나 wr_5에 입력되어있는 주소를 찾아가질 못하네요.

return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러'); myaddress 값으로 문제없이 들어가고 있습니다. // alert창 확인

콘솔창에도 오류는 뜨지 않고 있습니다.

네이버 api 호출 누적은 정상적으로 카운트 됩니다.

도움 요청드립니다.

</p>

<p><!-- 약도 --></p>

<p>                <script type="text/javascript" src="<a href="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=네이버ID&submodules=geocoder"></script>" target="_blank" rel="noopener noreferrer">https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=네이버ID&submodules=geocoder"></script></a></p>

<p>                <script type="text/javascript" src="<a href="https://oapi.map.naver.com/openapi/v3/maps-panorama.js"></script>" target="_blank" rel="noopener noreferrer">https://oapi.map.naver.com/openapi/v3/maps-panorama.js"></script></a></p>

<p>                <div id="map" style="width:71%;height:300px;"></div>    </p>

<p>

 </p>

<p>                        <script></p>

<p>                    var map = new naver.maps.Map('map');</p>

<p>                    var myaddress = '<?=$view['wr_5']?>';// 도로명 주소나 지번 주소만 가능 (건물명 불가!!!!)</p>

<p>                    naver.maps.Service.geocode({address: myaddress}, function(status, response) {</p>

<p>                        if (status === naver.maps.Service.Status.ERROR) {</p>

<p>                            return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러');</p>

<p>                        }</p>

<p>                        var result = response.result;</p>

<p>                        // 검색 결과 갯수: result.total</p>

<p>                        // 첫번째 결과 결과 주소: result.items[0].address</p>

<p>                        // 첫번째 검색 결과 좌표: result.items[0].point.y, result.items[0].point.x</p>

<p>                        var myaddr = new naver.maps.Point(result.items[0].point.x, result.items[0].point.y);</p>

<p>                        map.setCenter(myaddr); // 검색된 좌표로 지도 이동</p>

<p>                        // 마커 표시</p>

<p>                        var marker = new naver.maps.Marker({</p>

<p>                            position: myaddr,</p>

<p>                            map: map</p>

<p>                        });</p>

<p>                        // 마커 클릭 이벤트 처리</p>

<p>                        naver.maps.Event.addListener(marker, "click", function(e) {</p>

<p>                            if (infowindow.getMap()) {</p>

<p>                                infowindow.close();</p>

<p>                            } else {</p>

<p>                                infowindow.open(map, marker);</p>

<p>                            }</p>

<p>                        });</p>

<p>                        // 마크 클릭시 인포윈도우 오픈</p>

<p>                        var infowindow = new naver.maps.InfoWindow({</p>

<p>                            content: '<h4> <?=$view['subject']?></h4>'</p>

<p>                        });</p>

<p>                    });</p>

<p>                    </script>  </p>

<p>

 </p>

<p>                <!-- 약도 --></p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
5개월 전

아래 코드 한번 참고를 해보시는게 어떠실지요.

 

 

<!-- 약도 -->
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=네이버ID&submodules=geocoder"></script>
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps-panorama.js"></script>
<div id="map" style="width:71%;height:300px;"></div>    

<script>
// 지도 초기화
var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.5665, 126.9780), // 서울 시청 좌표 (기본값)
    zoom: 15
});

var myaddress = '<?=addslashes($view['wr_5'])?>';// PHP 문자열 이스케이프 처리

// 주소가 비어있는지 확인
if (!myaddress || myaddress.trim() === '') {
    console.log('주소가 입력되지 않았습니다.');
} else {
    console.log('검색할 주소:', myaddress); // 디버깅용
    
    // 지오코딩 요청
    naver.maps.Service.geocode({
        query: myaddress  // address 대신 query 사용
    }, function(status, response) {
        console.log('지오코딩 상태:', status); // 디버깅용
        console.log('응답 데이터:', response); // 디버깅용
        
        if (status === naver.maps.Service.Status.ERROR) {
            console.error('지오코딩 에러 발생');
            return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러');
        }
        
        if (status !== naver.maps.Service.Status.OK) {
            return alert('지오코딩 서비스 오류');
        }
        
        var result = response.v2; // v2 결과 사용
        
        // 결과가 없는 경우 체크
        if (!result || !result.addresses || result.addresses.length === 0) {
            return alert(myaddress + '의 검색 결과가 없습니다. 정확한 주소를 입력해주세요.');
        }
        
        // 첫 번째 결과 사용
        var item = result.addresses[0];
        var point = new naver.maps.Point(item.x, item.y);
        var latlng = new naver.maps.LatLng(item.y, item.x);
        
        // 지도 중심 이동
        map.setCenter(latlng);
        map.setZoom(16);
        
        // 마커 표시
        var marker = new naver.maps.Marker({
            position: latlng,
            map: map,
            title: '<?=addslashes($view['subject'])?>'
        });
        
        // 정보창 생성
        var infowindow = new naver.maps.InfoWindow({
            content: [
                '<div style="padding:10px;min-width:200px;line-height:150%;">',
                '<h4 style="margin-top:5px;margin-bottom:5px;"><?=addslashes($view['subject'])?></h4>',
                '<p style="margin:0;">' + item.roadAddress + '</p>',
                '</div>'
            ].join('')
        });
        
        // 마커 클릭 이벤트
        naver.maps.Event.addListener(marker, "click", function(e) {
            if (infowindow.getMap()) {
                infowindow.close();
            } else {
                infowindow.open(map, marker);
            }
        });
        
        // 지도 로드 시 정보창 자동 열기 (옵션)
        // infowindow.open(map, marker);
    });
}
</script>

<!-- 디버깅용 정보 표시 (개발 중에만 사용) -->
<div style="margin-top:10px; padding:10px; background:#f5f5f5; border:1px solid #ddd;">
    <strong>디버깅 정보:</strong><br>
    입력된 주소: <?=$view['wr_5']?><br>
    제목: <?=$view['subject']?>
</div>
<!-- 약도 -->

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

굼떠
5개월 전
답변 감사합니다. 해당 소스로 확인해보니 response 값이 undifined 라고 나오는데 제가 뭘 놓치고 있는건지 하나도 모르겠네요.
https://navermaps.github.io/maps.js.ncp/docs/tutorial-Geocoder-Geocoding.html
해당링크 참조해서 하나씩 다시 해봐야겠습니다 ㅠ 답변 감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인