logo
Tutorials Examples naver map js api v3 네이버 지도 API 사용자 정의 오버레이 표시하기

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

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

사용자 정의 오버레이를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다.

Brown
20m
NAVER
지도 데이터
x
© NAVER Corp. /OpenStreetMap
var CustomOverlay = function(options) {
    this._element = $('<div style="position:absolute;left:0;top:0;width:124px;background-color:#F2F0EA;text-align:center;border:2px solid #6C483B;">' +
                        '<img src="./img/example/brown.png" style="width: 120px; height:130px">' +
                        '<span style="font-weight: bold;"> Brown </span>' +
                        '</div>')

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

CustomOverlay.prototype = new naver.maps.OverlayView();
CustomOverlay.prototype.constructor = CustomOverlay;

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

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

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

    this._element.appendTo(overlayLayer);
};

CustomOverlay.prototype.draw = function() {
    if (!this.getMap()) {
        return;
    }

    var projection = this.getProjection(),
        position = this.getPosition(),
        pixelPosition = projection.fromCoordToOffset(position);

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

CustomOverlay.prototype.onRemove = function() {
    var overlayLayer = this.getPanes().overlayLayer;

    this._element.remove();
    this._element.off();
};

var position = new naver.maps.LatLng(37.3849483, 127.1229117);
var map = new naver.maps.Map("map", {
    center: position,
    zoom: 19
});
var overlay = new CustomOverlay({
    map: map,
    position: position
});

naver.maps.Event.addListener(map, 'click', function(e) { //클릭한 위치에 오버레이를 추가합니다.
    var overlay = new CustomOverlay({
        position: e.coord
    });

    overlay.setMap(map);
});