KVO 상태 변경 알림

KVO(Key-Value Observing) 상태 변경 알림은 NAVER 지도 API v3 객체의 상태 변경을 알려주는 이벤트입니다.

KVO 또는 KVOArray 클래스를 상속받은 NAVER 지도 API v3의 일부 객체는 자신의 상태를 가지고 있으며, 속성이 변경될 때마다 NAVER 지도 API v3은 속성이 변경되었다는 이벤트를 시작합니다.

KVO: 속성(키)이 변경되면 알려줍니다.
KVOArray: 배열 형태의 KVO로 배열의 요소가 변경되면 알려줍니다.

KVO 상태 변경 알림은 다음과 같은 규칙에 따라 이름이 지정됩니다.

{key}_changed

이벤트 리스너 등록하기

이벤트 리스너를 등록하면 객체의 상태 변경 알림을 수신할 수 있습니다. addListener 메서드를 이용해 특정 객체에서 발생한 알림을 받아 핸들러를 실행하는 리스너를 등록합니다.

다음은 지도의 줌 레벨이 변경되었을 때 줌 레벨을 정보 창에 표시하는 예제입니다.

var map = new naver.maps.Map('map', {
    zoom: 4,
    center: new naver.maps.LatLng(37.3614483, 127.1114883),
    padding: { top: 100 },
    zoomControl:true,
    zoomControlOptions: {
        style: naver.maps.ZoomControlStyle.SMALL
    }
});

var contentEl = $('<div class="iw_inner" style="width:350px;position:absolute;top:0;right:0;z-index:1000;background-color:#fff;border:solid 1px #333;">'
    + '<h3>Map States</h3>'
    + '<p style="font-size:14px;">zoom : <em class="zoom">'+ map.getZoom() +'</em></p>'
    + '<p style="font-size:14px;">center : <em class="center">'+ map.getCenter() +'</em></p>'
    + '<p style="font-size:14px;">bounds : <em class="bounds">'+ map.getBounds() +'</em></p>'
    + '</div>');

contentEl.appendTo(map.getElement());

naver.maps.Event.addListener(map, 'zoom_changed', function(zoom) {
    contentEl.find('.zoom').text(zoom);
});

naver.maps.Event.addListener(map, 'bounds_changed', function(bounds) {
    contentEl.find('.center').text(map.getCenter());
    contentEl.find('.bounds').text(bounds);
});

위 예제는 jQuery 구문을 포함하고 있습니다.

Examples: KVO 이벤트

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

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

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

이벤트 리스너 제거하기

이벤트 리스너를 등록 해제하면 더 이상 KVO 상태 변경 알림을 수신하지 않습니다. removeListener 메서드를 이용해 등록한 리스너를 제거합니다.

이벤트 인수에 접근하기

KVO 상태 변경 알림이 발생하면 NAVER 지도 API는 일반적으로 이벤트 인수를 전달하며, 등록한 리스너를 이용해 이벤트 인수에 접근할 수 있습니다.

예를 들어, 이벤트 리스너 등록하기에서 살펴본 예제에서 zoom_changed 알림이 발생하면 변경된 줌 레벨값에 접근해 사용하는 것을 볼 수 있습니다.

KVO 상태 변경 알림

이벤트 리스너 등록하기

이벤트 리스너 제거하기

이벤트 인수에 접근하기

Search results