사용자 정의 오버레이 표시하기
사용자 정의 오버레이 표시하기
사용자 정의 오버레이를 생성하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다.
Brown
© NAVER Corp.
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);
});