반응형
국내 Open API 중의 하나인 Naver API .
그 중에서 가장 인기 좋은(?) Map Open API 에 대해서 구현해 보았다.
Map Open API 키 받기
Open API 를 사용하기 위해서는 Naver 에서 키를 받아야 한다.
주소 : http://openapi.naver.com/register.nhn 에서 키를 받자.
참고 링크 : http://openapi.naver.com/page.nhn?PageId=3_02_2
키 부여
뿌릴 부분
객체 생성
표시될 위치 및 ZOOM 레벨 정하기
변수명.setCenterAndZoom(new NPoint(맵 포인트 ), Zoom 레벨 );
Tip : 해당 맵 포인트는 http://mmap.tistory.com/ 에서 얻을 수 있다.
확대, 축소 컨트롤 생성
그 중에서 가장 인기 좋은(?) Map Open API 에 대해서 구현해 보았다.
Map Open API 키 받기
Open API 를 사용하기 위해서는 Naver 에서 키를 받아야 한다.
주소 : http://openapi.naver.com/register.nhn 에서 키를 받자.
참고 링크 : http://openapi.naver.com/page.nhn?PageId=3_02_2
키 부여
<script type="text/JavaScript"
src="http://maps.naver.com/js/naverMap.naver?key=부여받은 NaverMap Key"></script>
뿌릴 부분
<div id='mapContainer' style='width:가로크기 ; height: 세로크기 '></div>
<div id='mapContainer' style='width:300px;height:300px'></div>
객체 생성
var 변수명 = new NMap(document.getElementById('mapContainer'),
가로크기, 세로크기 );
var mapObj = new NMap(document.getElementById('mapContainer'),300,300);
표시될 위치 및 ZOOM 레벨 정하기
변수명.setCenterAndZoom(new NPoint(맵 포인트 ), Zoom 레벨 );
Tip : 해당 맵 포인트는 http://mmap.tistory.com/ 에서 얻을 수 있다.
mapObj.setCenterAndZoom(new NPoint(321198,529730),3);
확대, 축소 컨트롤 생성
var zoom = new NZoomControl(); // 컨트롤을 생성
zoom.setAlign("right"); // 컨트롤 위치 정하기
zoom.setValign("bottom");
mapObj.addControl(zoom); // 컨트롤 추가하기
