포크하기 문의하기 개발자센터 바로가기 공지사항 바로가기
logo
Tutorials Examples naver map js api v3 네이버 지도 API v1에서 v3로 전환하기

마이그레이션: v1에서 v3로 전환하기

이 문서는 NAVER 지도 API v1에서 v3으로 전환하는 사용자를 위해 NAVER 지도 API v1의 주요 인터페이스 중 v3에서 변경된 내용을 중심으로 설명합니다.

주요 변경 내용

줌 레벨 지원 범위

  • v1: 1~12 레벨을 지원하고 있으며, 1 레벨이 최대 확대 레벨입니다.
  • v3: 1 레벨이 대한민국 전도가 보이는 레벨이며, 14 레벨이 최대 확대 레벨입니다.

오버레이, 컨트롤 추가/삭제 방법

  • v1: 오버레이, 컨트롤을 추가/삭제할 때 Map 객체의 다음 메서드를 이용합니다.
    • addOverlay
    • removeOveraly
    • addControl
    • removeControl
  • v3: setMap 메서드를 이용해 오버레이, 컨트롤을 지도에 추가/삭제합니다.

주요 객체 대체표

NAVER 지도 API v1은 별도의 네임스페이스가 없습니다. 그러나 v3은 naver.maps 네임스페이스가 있으며, 축약해 N 네임스페이스를 사용할 수 있습니다.

v1 v3 설명
NMap naver.maps.Map 지도 클래스
NSize naver.maps.Size Size 클래스
NPoint naver.maps.Point Point 좌표 클래스
NLatLng naver.maps.LatLng 경/위도 좌표 클래스
NEvent naver.maps.Event 이벤트 추가/삭제 객체
NMark naver.maps.Marker 마커 오버레이 클래스
NIcon 없음
NInfoWindow naver.maps.InfoWindow 정보 창 클래스
NPolyline naver.maps.Polyline 폴리라인 오버레이 클래스
NXmlHttp 없음
NZoomControl naver.maps.ZoomControl 지도 줌 컨트롤
NSaveBtn 없음
NIndexMap 없음
NMiniMap 없음

전환 방법

지도 초기화하기

v1

var map = new NMap(document.getElementById('mapContainer'), 300, 400);

v3

var map = new naver.maps.Map('mapContainer', {
    size: new naver.maps.Size(300, 400)
});

지도 이동하기

v1

var cityHall = new NLatLng(37.5666805, 126.9784147);
map.setCenterAndZoom(cityHall, 10);

var bounds = map.getBound();
map.setBound(bounds[0], bounds[1], bounds[2], bounds[3]);

map.pan(15, 30);

v3

var cityHall = new naver.maps.LatLng(37.5666805, 126.9784147);
map.setCenter(cityHall);
map.setZoom(3);

var bounds = map.getBounds();
map.fitBound(bounds);

map.panBy(new naver.maps.Point(15, -30));

지도 줌 레벨 설정하기

v1

map.zoomIn();
map.zoomOut();
map.setMinLevel(5);
map.setMaxLevel(10);

v3

map.setZoom(map.getZoom() + 1);
map.setZoom(map.getZoom() - 1);
map.setOptions("minZoom", 5);
map.setOptions("maxZoom", 10);

지도 인터랙션 옵션 조정하기

v1

map.disableDrag();
map.enableDrag();
map.disableWheelZoom();
map.enableWheelZoom();

v3

map.setOptions("draggable", false);
map.setOptions("draggable", true);
map.setOptions("scrollWheel", false);
map.setOptions("scrollWheel", true);

지도 이벤트 제어하기

v1

NEvent.addListener(map, 'move', onMove);
NEvent.removeListener(map, 'move', onMove);

NEvent.addListener(map, 'drag', onDrag);
NEvent.removeListener(map, 'drag', onDrag);

NEvent.addListener(map, 'startDrag', onDragStart);
NEvent.removeListener(map, 'startDrag', onDragStart);

NEvent.addListener(map, 'endDrag', onDragEnd);
NEvent.removeListener(map, 'endDrag', onDragEnd);

NEvent.addListener(map, 'click', onClick);
NEvent.removeListener(map, 'click', onClick);

NEvent.addListener(map, 'dblclick', onDblClick);
NEvent.removeListener(map, 'dblclick', onDblClick);

NEvent.addListener(map, 'mousemove', onMousemove);
NEvent.removeListener(map, 'mousemove', onMousemove);

NEvent.addListener(map, 'zoom', onZoom);
NEvent.removeListener(map, 'zoom', onZoom);

NEvent.addListener(map, 'redraw', onRedraw);
NEvent.removeListener(map, 'redraw', onRedraw);

v3

var listeners = [
    naver.maps.Event.addListener(map, 'center_changed', onMove),
    naver.maps.Event.addListener(map, 'bounds_changed', onMove),
    naver.maps.Event.addListener(map, 'drag', onDrag),
    naver.maps.Event.addListener(map, 'dragstart', onDragStart),
    naver.maps.Event.addListener(map, 'dragend', onDragEnd),
    naver.maps.Event.addListener(map, 'click', onClick),
    naver.maps.Event.addListener(map, 'dblclick', onDblClick),
    naver.maps.Event.addListener(map, 'mousemove', onMousemove),
    naver.maps.Event.addListener(map, 'zoom_changed', onZoom),
    naver.maps.Event.addListener(map, 'idle', onRedraw)
];

naver.maps.Event.removeListener(listeners);

마커 추가/삭제하기

v1

var cityHall = new NLatLng(37.5666805, 126.9784147);
var icon = new NIcon('http://static.naver.net/maps/v3/pin_default.png',
                    new NSize(22, 35), new NSize(11, 35));
var marker = new NMark(cityHall, icon);

map.addOverlay(marker);
map.removeOverlay(marker);

v3

var cityHall = new naver.maps.LatLng(37.5666805, 126.9784147);
var markerOptions = {
    position: cityHall,
    icon: {
        url: 'http://static.naver.net/maps/v3/pin_default.png',
        size: new naver.maps.Size(22, 35),
        anchor: new naver.maps.Point(11, 35)
    }
};
var marker = new naver.maps.Marker(markerOptions);

marker.setMap(map); // 추가
marker.setMap(null); // 삭제

정보 창 표시하기

v1

var infoWindow = new NInfoWindow();
infoWindow.set(cityHall, '<div style="background-color:#fff;border:solid 1px #333;padding:5px;">NAVER Maps</div>');

map.addOverlay(infoWindow);
infoWindow.showWindow();
infoWindow.delayHideWindow(2000);

v3

var infoWindow = new naver.maps.InfoWindow({
    content: 'NAVER Maps'
});

infoWindow.open(map, cityHall);
window.setTimeout(function() {
    infoWindow.close();
}, 2000);

폴리라인 추가/삭제하기

v1

var points = [
    new NLatLng(37.5679109, 126.9778991),
    new NLatLng(37.5677989, 126.9795420),
    new NLatLng(37.5664412, 126.9798661),
    new NLatLng(37.5656713, 126.9794012),
    new NLatLng(37.5657751, 126.9778604),
    new NLatLng(37.5662818, 126.9770724),
    new NLatLng(37.5671805, 126.9767998)
];

var polyline = new NPolyline();
polyline.setWeight(5);
polyline.setOpacity(0.5);
polyline.setColor("#0000ff");

for (var i=0, ii=points.length; i<ii; i++) {
    polyline.addPoints(points[i]);
}

map.addOverlay(polyline);
map.removeOverlay(polyline);

v3

var points = [
    new naver.maps.LatLng(37.5679109, 126.9778991),
    new naver.maps.LatLng(37.5677989, 126.9795420),
    new naver.maps.LatLng(37.5664412, 126.9798661),
    new naver.maps.LatLng(37.5656713, 126.9794012),
    new naver.maps.LatLng(37.5657751, 126.9778604),
    new naver.maps.LatLng(37.5662818, 126.9770724),
    new naver.maps.LatLng(37.5671805, 126.9767998)
];

var polyline = new naver.maps.Polyline({
    path: points,
    strokeWeight: 5,
    strokeColor: "#0000ff",
    strokeOpacity: 0.5
});

polyline.setMap(map); // 추가
polyline.setMap(null); // 삭제

원과 사각형 추가/삭제하기

v1

var circle = new NCircle(cityHall, 100);
circle.setLineColor("#00ff00");
circle.setLineWeight(10);
circle.setFillColor("#00ff00");
circle.setOpacity(0.5);
map.addOverlay(circle);
map.removeOverlay(circle);

var rect = new NRectangle(cityHall, new NSize(100, 200));
rect.setLineColor("#ff0000");
rect.setLineWeight(5);
rect.setFillColor("#ff0000");
rect.setOpacity(0.5);
map.addOverlay(rect);
map.removeOverlay(rect);

v3

var circle = new naver.maps.Circle({
    center: cityHall,
    radius: 100,
    strokeColor: "#00ff00",
    strokeWeight: 10,
    strokeOpacity: 0.5,
    fillColor: "#00ff00",
    fillOpacity: 0.5
});
circle.setMap(map);
circle.setMap(null);

var rect = new naver.maps.Rectangle({
    bounds: new naver.maps.LatLngBounds(cityHall, anotherLatLng)),
    strokeColor: "#ff0000",
    strokeWeight: 5,
    strokeOpacity: 0.5
    fillColor: "#ff0000",
    fillOpacity: 0.5
});
rect.setMap(map); // 추가
rect.setMap(null); // 삭제

지도 줌 컨트롤 표시하기

v1

var zoomControl = new NZoomControl();

zoomControl.setAlign("left");
zoomControl.setValign("top");
map.addControl(zoomControl);

v3

map.setOptions({
    zoomControl: true,
    zoomControlOptions: {
        position: naver.maps.Position.TOP_LEFT
    }
});

또는

var zoomControl = new naver.maps.ZoomControl({
    position: naver.maps.Position.TOP_LEFT
});

zoomControl.setMap(zoomControl);

미니 맵 표시하기

v1

var minimap = new NMiniMap();
minimap.setAlign("right");
minimap.setValign("bottom");

map.addControl(minimap);

v3

전체 화면 지도와 미니 맵 예제를 참고합니다.

Copyright 2016 NAVER Corp. All rights reserved. | Terms of Service Documentation generated by JSDoc 3.6.5 using the DocStrap template.