 APPLICATION
|
|
최근 활용팁 공유 RANK
-- update:30Min -- |
|
네이버 지도 + 마우스휠로 확대 축소 기능
web study
웹 스터디
|
홈페이지 제작,운영에 관련된 모든 기술 공유 게시판입니다.
웹프로그램, 웹디자인, 자바스크립트, HTML, XML, 시스템 관리 등 구분없습니다.
적립되는 포인트는 100P 입니다.
|
| ㆍ글쓴이 |
 Terrorboy
|
| ㆍ첨부#1 |
 icos_free_a.gif
(0KB) (Down:86)
|
|
ㆍ추천: 0 ㆍ읽음: 1319   
|
|
|
ㆍ2011-05-25 (수) 10:31 |
|
|
“ 네이버 지도 + 마우스휠로 확대 축소 기능 ”
총제작 기간 3일 걸렸지요....
이거 만들다 힘들어 죽는줄 알았습니다.
필요한 기능은 주석 처리를 해제 하시면 됩니다.
참고로 제가 그누에 올렸던 소스보다 더 좋은것입니다.
<!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=api지도키"></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("./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>
</BODY>
</HTML>
|
19
|
 |
|
공지사항
청주산의
3일동안 죽는줄 알면서 팁으로 올려주신 내용
아이케
아래 다 좋은팁 감사합니다^^
그누보다 더 좋은 팁으로 제공해 주셔서 감사합니다.
우기77
우기77 
Good ^0^
콜라~
