사용자 정의 오버레이

NAVER 지도 API v3은 사용자 정의 오버레이를 생성할 수 있도록 OverlayView 클래스를 제공합니다. 이 클래스는 오버레이를 생성할 때 구현해야 하는 여러 메서드를 제공합니다.

다음은 사용자 정의 오버레이에 꼭 구현해야 하는 메서드입니다.

• onAdd 메서드는 지도에 오버레이를 추가할 때 호출되는 내용으로 구현해야 합니다.
• draw 메서드는 지도에 오버레이를 그려야 할 때 호출되는 내용으로 구현해야 합니다.
• onRemove 메서드는 지도에서 오버레이가 삭제될 때 호출되는 내용으로 구현해야 합니다.

사용자 정의 오버레이 추가

사용자 정의 오버레이 생성

다음 예제는 OverlayView를 상속받는 간단한 DOM 요소 오버레이를 생성합니다.

/**
 * 사용자 정의 오버레이 구현하기
 */
var CustomOverlay = function(options) {
    this._element = $('<div style="position:absolute;left:0;top:0;width:120px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:2px solid #f00;">커스텀오버레이</div>')

    this.setPosition(options.position);
    this.setMap(options.map || null);
};

// CustomOverlay는 OverlayView를 상속받습니다.
CustomOverlay.prototype = new naver.maps.OverlayView();

CustomOverlay.prototype.constructor = CustomOverlay;

CustomOverlay.prototype.onAdd = function() {
    var overlayLayer = this.getPanes().overlayLayer;
    
    this._element.appendTo(overlayLayer);
};

CustomOverlay.prototype.draw = function() {
    // 지도 객체가 설정되지 않았으면 draw 기능을 하지 않습니다.
    if (!this.getMap()) {
        return;
    }

    // projection 객체를 통해 LatLng 좌표를 화면 좌표로 변경합니다.
    var projection = this.getProjection(),
        position = this.getPosition();

    var pixelPosition = projection.fromCoordToOffset(position);

    this._element.css('left', pixelPosition.x);
    this._element.css('top', pixelPosition.y);
};

CustomOverlay.prototype.onRemove = function() {
    this._element.remove();
    
    // 이벤트 핸들러를 설정했다면 정리합니다.
    this._element.off();
};

CustomOverlay.prototype.setPosition = function(position) {
    this._position = position;
    this.draw();
};

CustomOverlay.prototype.getPosition = function() {
    return this._position;
};

/**
 * 사용자 정의 오버레이 사용하기
 */
var center = new naver.maps.LatLng(37.358202009037356, 127.10801839828491);
var map = new naver.maps.Map("map", {
    center: center,
    zoom: 12
});

// 오버레이 생성
var overlay = new CustomOverlay({
    position: center,
    map: map
});

// 오버레이 삭제 
// overlay.setMap(null);

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

Examples: 사용자 정의 오버레이 표시하기

사용자 정의 오버레이 초기화

사용자 정의 오버레이 객체를 생성하면 지도에 연결해야 합니다. NAVER 지도 API는 setMap(map) 메서드 호출 시(또는 옵션의 map 속성 설정 시) onAdd 메서드를 호출해 오버레이가 지도에 추가되었음을 알립니다. 따라서, 지도 창(pane) 요소 중 적합한 요소에 오버레이 요소를 추가하는 기능을 이 메서드에 구현합니다.

CustomOverlay.prototype.onAdd = function() {
    var overlayLayer = this.getPanes().overlayLayer;
    
    this._element.appendTo(overlayLayer);
};

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

getPanes 메서드는 지도 창 요소를 나타내는 MapPanes 객체를 반환합니다.

사용자 정의 오버레이 그리기

지도에서 오버레이를 다시 그려야 할 때마다 NAVER 지도 API는 draw 메서드를 호출합니다. 따라서, 오버레이의 위치, 모양 등 현재 오버레이가 보여야 할 모습으로 업데이트하는 기능을 이 메서드에 구현합니다.

CustomOverlay.prototype.draw = function() {
    // 지도 객체가 설정되지 않았으면 draw 기능을 하지 않습니다.
    if (!this.getMap()) {
        return;
    }

    // projection 객체를 통해 LatLng 좌표를 화면 좌표로 변경합니다.
    var projection = this.getProjection(),
        position = this.getPosition();

    var pixelPosition = projection.fromCoordToOffset(position);

    this._element.css('left', pixelPosition.x);
    this._element.css('top', pixelPosition.y);
};

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

getProjection 메서드는 지도 좌표와 화면 좌표를 서로 변환할 수 있는 메서드를 제공하는 MapSystemProjection 객체를 반환합니다. 이를 이용해 오버레이의 지도 좌표를 화면 좌표로 변환하고, 적절한 위치에 오버레이를 배치합니다.

사용자 정의 오버레이 제거

NAVER 지도 API v3은 setMap(null) 메서드 호출 시(또는 옵션의 map 속성을 null로 설정 시) onRemove 메서드를 호출해 오버레이가 지도에서 제거되었음을 알립니다. 따라서, 오버레이 요소를 지도 창 요소에서 제거하는 기능을 이 메서드에 구현합니다.

CustomOverlay.prototype.onRemove = function() {
    this._element.remove();

    // 이벤트 핸들러를 설정했다면 정리합니다.
    this._element.off();
};

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