묻고답하기
XE에 네이버 맵 API 를 올리려고하는데요
2014.07.27 18:19
아무리 찾아봐도 해결방법을 모르겠어요.
XE CORE 1.7.5.5 버젼이고요
게시판 메뉴타입 : 외부 페이지
-> 상세설정 -> 외부문서 연결(gido.html)
gido.html
<style type="text/css">
v\:* { behavior: url(#default#VML); }
*{margin:0;padding:0}
li{list-style:none}
.tabContainer{position:relative;width:100%;margin:20px auto;border:1px solid red}
#tab li a{position:absolute;left:0;display:block;width:50px;height:100px;
color:#fff;background:orange;text-align:center}
#tab li a.on{background:#0099ff}
#tab li a.tabBtn1{top:0}
#tab li a.tabBtn2{top:100px}
#testMap,#tab1{width:600px; height:500px;display:block;
margin:0 auto;border:1px solid #000}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- prevent IE6 flickering -->
<script type="text/javascript">
try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
</script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=3432a914715cffacd73d3f06d7e6b912"></script>
<div class="tabContainer">
<ul id="tab">
<li><a href="#" class="tabBtn1 on">메뉴1</a></li>
<li><a href="#" class="tabBtn2">지도</a></li>
</ul>
<div id="tab1" class="tab" >일반내용페이지</div>
<div id = "testMap" class="tab"></div>
</div><!-- tabContainer 종료 -->
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(37.6498086,127.0617673);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('testMap', {
center : oPoint,
level : 10, // - 초기 줌 레벨은 10이다.
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
activateRealtyMap : true,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(500, 400)
});
var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
mapZoom.setPosition({right:10, bottom:10}); // - 줌 컨트롤 위치 지정.
var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
trafficButton.setPosition({top:5, right:5}); // - 실시간 교통지도 버튼 위치 지정
mapTypeChangeButton = new nhn.api.map.MapTypeBtn(); // - 지도 타입 버튼 선언
mapTypeChangeButton.setPosition({top:5, left:5}); // - 지도 타입 버튼 위치 지정
oMap.addControl(mapZoom); // - 줌 컨트롤 추가.
oMap.addControl(mapTypeChangeButton);
oMap.addControl(trafficButton);
var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
// - Draggable Marker 의 경우 Icon 인자는 Sprite Icon이 된다.
// - 따라서 Sprite Icon 을 사용하기 위해 기본적으로 사용되는 값을 지정한다.
// - Sprite Icon 을 사용하기 위해서 상세한 내용은 레퍼런스 페이지의 nhn.api.map.SpriteIcon 객체를 참조하면 된다.
var oMarker1 = new nhn.api.map.Marker(oIcon, { title : '표시 위치' }); //마커 생성
oMarker1.setPoint(oPoint); //마커 표시할 좌표 선택
oMap.addOverlay(oMarker1); //마커를 지도위에 표현
var oLabel1 = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel1); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oLabel1.setVisible(true, oMarker1); // 마커 라벨 보이기
</script>
<script type="text/javascript">
jQuery(function($){
$('#testMap').hide()
$('#tab>li>a').eq(0).on('click',function(){
$('.tabContainer .tab').hide()
$('#tab1').show()
$('#tab>li>a').removeClass('on')
$(this).addClass('on')
})
$('#tab>li>a').eq(1).on('click',function(){
$('.tabContainer .tab').hide()
$('#testMap').show()
$('#tab>li>a').removeClass('on')
$(this).addClass('on')
})
})
</script>
이렇게 해서 올렸는데요. 디폴트 레이아웃에서조차 네이버 맵이 연동이 안되고
맵 틀만 나옵니다. 당연히 키는 제대로 입력했고요
외부 문서가 아니라 레이아웃 자체적으로 코딩해서 올려보면 그때는 잘 나오거든요??
외 이럴까요.
댓글 8
-
mAKEkr
2014.07.27 18:49
-
레드윈드2
2014.07.27 19:38
아 네 일단 확인해보겠습니다.
-
mAKEkr
2014.07.27 19:43
참고로 XE내에선 기본 인식자가 꺼져있습니다
(function($){
[[jQuery 소스내용]]
});
이런식으로 jQuery 소스를 넣어보세요
-
레드윈드2
2014.07.27 19:49
jQuery 로드구문은 삭제 해봤지만 별달리 차이점은 없는거 같고요 역시나 맵 테두리와 마커등만 나오고 지도 그림이 안나옵니다. 그리고 스크립트 충돌은 어디서 찾아볼수있나요?? 요소검사로 들어가도 오류 메세지는 없습니다.
아 그리고 말씀하신 jQuery(function($){ 스크립트 }) 이거 아닌가요???
-
mAKEkr
2014.07.27 19:57
네 그건 맞는데 작동을 안하네요. window onload로 페이지 로드시 걸어보아도 안됩니다.
Uncaught TypeError: Cannot read property 'replace' of undefined 라고 api쪽에서 에러나는걸 보면 api키값 문제로 제가 테스트해보진 못할것같아요.
스크립트는 최대한 window.onload = function(){}, jQuery(function($){}); 과 같이 윈도우 로드 완료된 후에 불러올 수 있도록 해보시고, 개발자도구 콘솔 통해서 디버깅 체크해보시기 바랍니다.. 제가 말씀해드릴 수 있는게 이게 최대한인것같네요
-
레드윈드2
2014.07.27 19:59
네 일단 신경 써주셔서 감사드려요 이거 꼭 해결해야될 문제라서요. ㅠㅠ 일단 웹서버에 업시켜서 주소 적어보겠습니다. 한번 봐주세요
-
레드윈드2
2014.07.27 20:42
다른 코드는 넣지 않고 최대한 디폴트값으로 급조해서 서버에 올려봤습니다.
역시 네이버 맵이 연동이 안되는데 이유를 모르겠어요 ㅜㅜ
주소는 http://pappy579.speeds.kr/index.php?mid=gnb1# 입니다.
-
레드윈드2
2014.07.28 20:27
원인 찾아냈습니다. 제가 사용했던 레이아웃이나 오피셜 디폴트 레이아웃에서
img에
.xe_content img {
max-width: 100%;
height: auto;
} 가 네이버 api에서의 지도표현하는 스크립트와 충돌이 나는거 같더군요
xe/common/css/xe.css 에 들어있던데요.
혹시 .xe_content img 라는 클래스를 가로 값하고 높이값을 주석처리하면
어떤 기능이 안되는건가요?
해당 클래스 주석처리해버리니까 네이버 맵 연동 잘됩니다.
jQuery는 XE내에 자체 내장되어있습니다. 스크립트 충돌나는건 없는지 확인해보세요