채택완료

그누보드 게시물 안에 네이버 지도 삽입 관련해서 질문드려요.

네이버 블로그의 게시물을 파싱해와서 그누보드 게시물로 옮기는 중

네이버 지도는 iframe으로 이루어져서 제대로 파싱을 해올 수가 없는 것을 발견했습니다.

게시글에 iframe을 직접적으로 넣으면 안 된다고 알고 있는데

게시글 내에 네이버 지도가 삽입이 되어야 하는데

혹시 이 부분 관련해서 처리를 해보신 분이나 다른 고수분들의 조언 부탁드립니다.

답변 2개

채택된 답변
+20 포인트
네이버 지도는 네이버에서 키를 받아야 되요..자세한건 모르겟네요 ㅜㅜ

https://developer.naver.com/openapi/register.nhn


우선 위 사이트에 가셔서 지도를 나타낼 사이트를 신청해서 Key를 받아야 합니다.

그런 후  아래 스크립을 저장한후 인클루트해서 사용 하세요.

좌표 알아내는 법은 내용에 있으니 잘 읽어 보시고, 받은 Key 값은 상단 5번째줄  붉은색으로 표시한 부분을 교체 하시면 됩니다. 좌표값은 링크 틀릭해서 알아내셔서 입력해주면 됩니다.






Copy
<!-- 네이버맵시작 --><script type="text/javascript">try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}</script><script type="text/javascript" src="http://map.naver.com/js/naverMap.naver?key=a899fb4f434e8a17b50c0c91f82c8ed0"></script> <!-- 네이버맵 끝 --><div style="border:1px solid #ff0000; width:520px;"><div id="map"></div> <script type="text/javascript">  /*  * 지도API 2.0은 기존의 카텍 좌표 외에도 위경도 좌표를 지원합니다.  * 위경도 좌표를 사용하기 위해서는 기존의 NPoint 클래스 대신 NLatLng 클래스를 사용해야 합니다.  *  * http://maps.naver.com/api/geocode.php 에서 "경기도성남시정자1동25-1"을 검색한 결과인  * x : 321033, y : 529749  * 를 예로 들어 설명해 보겠습니다.  *  * 편의를 위해 전역변수로 mapObj, tm128, latlng를 선언해 두었습니다.  */ var mapObj = new NMap(document.getElementById('map'),520,300); var tm128 = new NPoint(311941,554138); var latlng;  /*  * 경기도성남시정자1동25-1의 위치로 이동합니다. 레벨은 1로 지정하였습니다.  * 인덱스맵과 확대/축소 컨트롤러를 등록하고 마우스 줌인/아웃을 활성화 하였습니다.  */ mapObj.setCenterAndZoom(tm128, 2); //mapObj.addControl(new NIndexMap()); mapObj.addControl(new NZoomControl()); mapObj.enableWheelZoom();  /*좌표변환*/ transFromTM128ToLatLng() /*이동*/ moveLatLng(); /*표시*/ showMark();  function transFromTM128ToLatLng() {  latlng = mapObj.fromTM128ToLatLng(tm128); }  /*  * NPoint가 사용되는 곳이면 NLatLng을 대신해서 사용할 수 있습니다.  */             function moveLatLng() {  mapObj.setCenter(latlng); }  /*  * NMark도 마찬가지로 tm128 대신 위경도를 사용하여 아이콘을 표시하였습니다.  */             function showMark() {  var mark = new NMark(latlng, new NIcon('http://static.naver.com/maps/ic_spot.png',new NSize(52,41),new NSize(14,40)));  mapObj.addOverlay(mark);  var win = new NInfoWindow();  win.set(latlng, "네이버약도API활용하기") ;  //win.showWindow();  mapObj.addOverlay(win); }
 /*  * NLatLng에 위경도가 아닌 tm128 좌표를 넣게되면 예상치 못한 결과가 나오게 됩니다.  * 카텍 좌표는 NPoint, 위경도 좌표는 NLatLng를 사용해야 함을 잊지마세요.  * 그리고 NLatLng는 (lat, lng)를 아규먼트로 받습니다.  * 위도(y), 경도(x)의 순으로 아규먼트를 넣어야 합니다. 이점도 주의하세요.  */             function moveError() {  var errPoint = new NLatLng(tm128.y, tm128.x);  mapObj.setCenter(errPoint) } </script></div>
<!----------------------------컨텐츠끝--------------------------->

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