네이버 지도 api (추가기능 휠로 확대 축소) // 20110218 수정 정보
네이버 지도 api (추가기능 휠로 확대 축소) // 20110218 수정
본문
기능은 마우스 휠로 축소/ 확대/ 마크업기능 추가 해둔상태구요.
모바일 빌더용으로 만들어 둔것을 끌어다가 찾아오기에 넣으려고 수정해둔상태입니다.
쓰실분만 쓰세요.
ps. 소스로 인한 에러, 기타등의 책임은 안집니다. 알아서 잘... 개조하시든지 그냥 쓰시든지 하세요.
ps2. 아직 맵이 마우스를 따라 다니는 버그를 수정못했습니다. 현제 문제점에 대하여 네이버 개발 센터에 문의해둔상태입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>지도 테스트</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
</HEAD>
<BODY>
<SCRIPT type="text/javascript" src="http://map.naver.com/js/naverMap.naver?key=7aa8528bd7a7452130ecefaa121333b7"></SCRIPT>
<div id='mapContainer' style='width:600px;height:400px' onmousewheel="m_move();"></div>
<?/*
<button onclick=addClick()>click event 등록</button><button onclick=removeClick()>click event 제거</button><br />
<button onclick='mapObj.pan(0,100)'><font size="20pt">▲</font></button>
<button onclick='mapObj.pan(0,-100)'><font size="20pt">▼</font></button>
<button onclick='mapObj.pan(-100,0)'><font size="20pt">◀</font></button>
<button onclick='mapObj.pan(100,0)'><font size="20pt">▶</font></button>
<button onclick='mapObj.zoomIn()'><font size="7pt">확대</font></button>
<button onclick='mapObj.zoomOut()'><font size="7pt">축소</font></button><p>
<button onclick='mapObj.setZoom(1)'><font size="5pt">1</font></button>
<button onclick='mapObj.setZoom(2)'><font size="5pt">2</font></button>
<button onclick='mapObj.setZoom(3)'><font size="5pt">3</font></button>
<button onclick='mapObj.setZoom(4)'><font size="5pt">4</font></button>
<button onclick='mapObj.setZoom(5)'><font size="5pt">5</font></button>
<button onclick='mapObj.setZoom(6)'><font size="5pt">6</font></button>
*/?>
<SCRIPT LANGUAGE="JavaScript">
<!--
/* 휠로 지도 확대 축소 조절 */
function m_move(delta){
var delta = 0;
if(!event){event = window.event;}
if (event.wheelDelta){delta = event.wheelDelta/120;}
if (window.opera){delta = -delta;}
if (delta){handle(delta);}
if (event.preventDefault){
event.preventDefault();
event.returnValue = false;
}
if (window.addEventListener){
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
}
function handle(delta) {
if (delta < 0)
mapObj.zoomOut();
else
mapObj.zoomIn();
}
}
/* //휠로 지도 확대 축소 조절// */
/*지도 개체 생성 */
//var opts = {width:'300', height:'300', mapMode:0}; // 크기 및 지도 모드<0:지도보기, 1:겹쳐보기, 2:위성사진>
var opts = {mapMode:0};
//var objMap = new NMap(document.getElementById('mapContainer'),opts);
var mapObj = new NMap(document.getElementById('mapContainer'),opts);
var x = "300390"; // x축 위치
var y = "284259"; // x축 위치
var nPoint = new NPoint(x,y);
/* 지도 좌표, 축적 수 준 초기화 */
mapObj.setCenterAndZoom(new NPoint(x,y),1); // 좌표<(주) 인포큐브 좌표> 및 확대 단계
/* 지도 컨트롤 생성 */
var zoom = new NZoomControl();
zoom.setAlign("right");
zoom.setValign("top");
mapObj.addControl(zoom);
/* 지도 모드 변경 버튼 생성 */
var mapBtns = new NMapBtns();
mapBtns.setAlign("right");
mapBtns.setValign("top");
mapObj.addControl(mapBtns);
/* 클릭좌표 표시 */
var regFlag = false;
function addClick()
{
if (!regFlag)
{
NEvent.addListener(mapObj,"click",clicked);
regFlag = true;
}
}
function removeClick()
{
NEvent.removeListener(mapObj,"click",clicked);
regFlag = false;
}
function clicked(pos)
{
alert(pos+" clicked");
}
/* 지도에 마커생성 */
var marker = new NMark(nPoint,new NIcon("<?=$g4[path]?>/module/map/icos_free_a.gif",new NSize(15,14)));
var infowin = new NInfoWindow();
var text = new NPoint(300320,284230);
infowin.set(text, " <font color=green size=3><b>(주) 인포큐브</b></font>");
mapObj.addOverlay(infowin);
infowin.showWindow();
mapObj.addOverlay(marker);
//-->
</SCRIPT>
</BODY>
</HTML>
// 20110218 수정 합니다. 수정내용은 지도객체 클릭시 마우스 따라다니는 현상 패치입니다.
수정 내용.
소스 중간에
var objMap = new NMap(document.getElementById('mapContainer'),opts);
주석 처리.
모바일 빌더용으로 만들어 둔것을 끌어다가 찾아오기에 넣으려고 수정해둔상태입니다.
쓰실분만 쓰세요.
ps. 소스로 인한 에러, 기타등의 책임은 안집니다. 알아서 잘... 개조하시든지 그냥 쓰시든지 하세요.
ps2. 아직 맵이 마우스를 따라 다니는 버그를 수정못했습니다. 현제 문제점에 대하여 네이버 개발 센터에 문의해둔상태입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>지도 테스트</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
</HEAD>
<BODY>
<SCRIPT type="text/javascript" src="http://map.naver.com/js/naverMap.naver?key=7aa8528bd7a7452130ecefaa121333b7"></SCRIPT>
<div id='mapContainer' style='width:600px;height:400px' onmousewheel="m_move();"></div>
<?/*
<button onclick=addClick()>click event 등록</button><button onclick=removeClick()>click event 제거</button><br />
<button onclick='mapObj.pan(0,100)'><font size="20pt">▲</font></button>
<button onclick='mapObj.pan(0,-100)'><font size="20pt">▼</font></button>
<button onclick='mapObj.pan(-100,0)'><font size="20pt">◀</font></button>
<button onclick='mapObj.pan(100,0)'><font size="20pt">▶</font></button>
<button onclick='mapObj.zoomIn()'><font size="7pt">확대</font></button>
<button onclick='mapObj.zoomOut()'><font size="7pt">축소</font></button><p>
<button onclick='mapObj.setZoom(1)'><font size="5pt">1</font></button>
<button onclick='mapObj.setZoom(2)'><font size="5pt">2</font></button>
<button onclick='mapObj.setZoom(3)'><font size="5pt">3</font></button>
<button onclick='mapObj.setZoom(4)'><font size="5pt">4</font></button>
<button onclick='mapObj.setZoom(5)'><font size="5pt">5</font></button>
<button onclick='mapObj.setZoom(6)'><font size="5pt">6</font></button>
*/?>
<SCRIPT LANGUAGE="JavaScript">
<!--
/* 휠로 지도 확대 축소 조절 */
function m_move(delta){
var delta = 0;
if(!event){event = window.event;}
if (event.wheelDelta){delta = event.wheelDelta/120;}
if (window.opera){delta = -delta;}
if (delta){handle(delta);}
if (event.preventDefault){
event.preventDefault();
event.returnValue = false;
}
if (window.addEventListener){
window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
}
function handle(delta) {
if (delta < 0)
mapObj.zoomOut();
else
mapObj.zoomIn();
}
}
/* //휠로 지도 확대 축소 조절// */
/*지도 개체 생성 */
//var opts = {width:'300', height:'300', mapMode:0}; // 크기 및 지도 모드<0:지도보기, 1:겹쳐보기, 2:위성사진>
var opts = {mapMode:0};
//var objMap = new NMap(document.getElementById('mapContainer'),opts);
var mapObj = new NMap(document.getElementById('mapContainer'),opts);
var x = "300390"; // x축 위치
var y = "284259"; // x축 위치
var nPoint = new NPoint(x,y);
/* 지도 좌표, 축적 수 준 초기화 */
mapObj.setCenterAndZoom(new NPoint(x,y),1); // 좌표<(주) 인포큐브 좌표> 및 확대 단계
/* 지도 컨트롤 생성 */
var zoom = new NZoomControl();
zoom.setAlign("right");
zoom.setValign("top");
mapObj.addControl(zoom);
/* 지도 모드 변경 버튼 생성 */
var mapBtns = new NMapBtns();
mapBtns.setAlign("right");
mapBtns.setValign("top");
mapObj.addControl(mapBtns);
/* 클릭좌표 표시 */
var regFlag = false;
function addClick()
{
if (!regFlag)
{
NEvent.addListener(mapObj,"click",clicked);
regFlag = true;
}
}
function removeClick()
{
NEvent.removeListener(mapObj,"click",clicked);
regFlag = false;
}
function clicked(pos)
{
alert(pos+" clicked");
}
/* 지도에 마커생성 */
var marker = new NMark(nPoint,new NIcon("<?=$g4[path]?>/module/map/icos_free_a.gif",new NSize(15,14)));
var infowin = new NInfoWindow();
var text = new NPoint(300320,284230);
infowin.set(text, " <font color=green size=3><b>(주) 인포큐브</b></font>");
mapObj.addOverlay(infowin);
infowin.showWindow();
mapObj.addOverlay(marker);
//-->
</SCRIPT>
</BODY>
</HTML>
// 20110218 수정 합니다. 수정내용은 지도객체 클릭시 마우스 따라다니는 현상 패치입니다.
수정 내용.
소스 중간에
var objMap = new NMap(document.getElementById('mapContainer'),opts);
주석 처리.
추천
4
4
댓글 10개
추천^^
^^ ㅅ ㅣ ㅂ ㅁ ㅏ
ㅡ ㄹ ㅜ ㄴ
ㄴ
ㅡ ㄹ ㅜ ㄴ
ㄴ
팁 감사합니다
현제 우리동네로 죄표값은 어떻게 구하나요?
아 좌표 구하는법을 안 알려드렸군요.
소스 자체적으로 좌표를 구하는것이 있지만 보다 정확한 방법을 위하여
http://map.naver.com/api/geocode.php?key=api지도키&encoding=utf-8&coord=tm128&query=주소
로 하여 나오는 xml페이지에서 x값과 y값을 보시면됩니다.
소스 자체적으로 좌표를 구하는것이 있지만 보다 정확한 방법을 위하여
http://map.naver.com/api/geocode.php?key=api지도키&encoding=utf-8&coord=tm128&query=주소
로 하여 나오는 xml페이지에서 x값과 y값을 보시면됩니다.
허걱 그세 답변을 ...동시 글을썻엇군요..
위 게시글 수정 하려니 안되서 왜 그랬나 햇더니..ㅋㅋ
위 게시글 수정 하려니 안되서 왜 그랬나 햇더니..ㅋㅋ
알아넸습니다.
네이버 api센타에 있는것도 모르고 여기저기 검색했으니..
http://map.naver.com/api/geocode.php?key=test&encoding=utf-8&coord=tm128&query=경기도성남시정자1동25-1
key=test <= 키 입력하시고 마지막에 주소쓰고 엔터..ㅠㅠ
네이버 api센타에 있는것도 모르고 여기저기 검색했으니..
http://map.naver.com/api/geocode.php?key=test&encoding=utf-8&coord=tm128&query=경기도성남시정자1동25-1
key=test <= 키 입력하시고 마지막에 주소쓰고 엔터..ㅠㅠ
수정하였습니다. 수정된 소스로 사용바랍니다.
어렵지만... 먼가 재밌다... 키키킼
와 좋다~~ 기능도 많이 추가되고 좋네요~ 잘 쓸께요~%%
