그누보드 게시물 안에 네이버 지도 삽입 관련해서 질문드려요.
본문
네이버 블로그의 게시물을 파싱해와서 그누보드 게시물로 옮기는 중
네이버 지도는 iframe으로 이루어져서 제대로 파싱을 해올 수가 없는 것을 발견했습니다.
게시글에 iframe을 직접적으로 넣으면 안 된다고 알고 있는데
게시글 내에 네이버 지도가 삽입이 되어야 하는데
혹시 이 부분 관련해서 처리를 해보신 분이나 다른 고수분들의 조언 부탁드립니다.
답변 2
네이버 지도는 네이버에서 키를 받아야 되요..자세한건 모르겟네요 ㅜㅜ
https://developer.naver.com/openapi/register.nhn
우선 위 사이트에 가셔서 지도를 나타낼 사이트를 신청해서 Key를 받아야 합니다.
그런 후 아래 스크립을 저장한후 인클루트해서 사용 하세요.
좌표 알아내는 법은 내용에 있으니 잘 읽어 보시고, 받은 Key 값은 상단 5번째줄 붉은색으로 표시한 부분을 교체 하시면 됩니다. 좌표값은 링크 틀릭해서 알아내셔서 입력해주면 됩니다.
<!-- 네이버맵시작 -->
<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>
<!----------------------------컨텐츠끝--------------------------->
답변을 작성하시기 전에 로그인 해주세요.
