UI 이벤트

지도 UI 이벤트는 지도와 사용자의 상호작용으로 발생하는 이벤트입니다. NAVER 지도 API v3의 일부 객체는 다음과 같은 지도 UI 이벤트에 응답하도록 설계되었습니다.

• mousedown, mouseup, click, dblclick, rightclick, mouseover, mouseout, mousemove
• dragstart, drag, dragend
• touchstart, touchmove, touchend, pinchstart, pinch, pinchend, tap, longtap, twofingertap, doubletap

이 이벤트는 표준 DOM(Document Object Model) 이벤트처럼 보이나 실제로는 NAVER 지도 API v3의 이벤트입니다. 따라서 브라우저 간 특성차를 사용자가 별도로 처리할 필요 없이 DOM 이벤트를 수신하거나 응답할 수 있습니다.

이벤트 리스너 등록하기

이벤트 리스너를 등록하면 지도 UI 이벤트를 수신할 수 있습니다. addListener 메서드를 이용해 특정 객체에서 발생한 이벤트를 받아 핸들러를 실행하는 리스너를 등록합니다.

다음은 지도를 클릭했을 때 해당 위치를 console.log 메서드로 출력하는 예제입니다.

var mapOptions = {
    zoom: 4,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
};

var map = new naver.maps.Map('map', mapOptions);

naver.maps.Event.addListener(map, 'click', function(e) {
    console.log(e);
});

리스너를 등록하면 다음과 같이 MapEventListener 객체를 받습니다.

MapEventListener = {
    eventName: String,
    listener: Function,
    listenerId: String,
    target:Object
}

MapEventListener 객체는 등록된 리스너의 정보를 담고 있는 객체로 등록된 리스너를 제거할 때 이용합니다.

이벤트 리스너 제거하기

이벤트 리스너를 등록 해제하면 더 이상 지도 UI 이벤트를 수신하지 않습니다. removeListener 메서드를 이용해 등록한 리스너를 제거합니다.

다음 예제는 마커에 등록한 리스너를 제거하는 예제입니다.

var mapOptions = {
    zoom: 4,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
};

var map = new naver.maps.Map('map', mapOptions);

var markerOptions = {
    position: map.getCenter(),
    map: map
};

var marker = new naver.maps.Marker(markerOptions);

var listener = naver.maps.Event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());

    naver.maps.Event.removeListener(listener);
});

이벤트 인수에 접근하기

지도 UI 이벤트가 발생되면 NAVER 지도 API v3은 일반적으로 이벤트 인수를 전달하며, 등록한 리스너를 이용해 이벤트 인수에 접근할 수 있습니다 예를 들어, Map 객체는 click 이벤트 등 몇 가지 이벤트에 대해 PointerEvent 객체의 인수를 전달합니다.

다음은 지도를 클릭했을 때 해당 위치에 마커를 올리는 예제입니다.

var mapOptions = {
    zoom: 4,
    center: new naver.maps.LatLng(37.3614483, 127.1114883)
};

var map = new naver.maps.Map('map', mapOptions);

var listener = naver.maps.Event.addListener(map, 'click', function(e) {
    var marker = new naver.maps.Marker({
        position: e.coord,
        map: map
    });
});

+Examples: 이벤트 기본 예제
+Examples: 오버레이의 이벤트