커스텀 오버레이를 고정시킬수 있는 방법이 있나요?

안녕하세요.

제가 커스텀 타일셋으로 작업하고있는데 커스텀 타일셋 크기만큼 커스텀 오버레이를 올려서 거기에 DIV로 표시하는 기능을 만들었습니다.

그런데 맵을 움직이면 커스텀 오버레이가 안보일때도 있고 줌인을 하면 크기 1/4크기로 변경되어서 크기를 고정시키고 항상 떠있을 수 있도록 할 수 있는 방법이 있나요?

꼭 커스텀 오버레이를 사용안해도 됩니다.

음… 어느 부분에서 커스텀 타일셋과 커스텀 오버레이를 사용하는지는 잘 모르겠습니다만
고정으로 원하는 콘텐츠를 항상 표시하고 싶으시면 아래 예제를 활용할 수 있을 것 같습니다.
http://apis.map.kakao.com/web/sample/customOverlay2/

image
사진보시면 빨갛게 보이는 곳이 커스텀 오버레이를 올려서 거기에 DIV로 구현했습니다.

근데 맵을 움직이거나 줌을하면 커스텀 오버레이가 없어지거나 줄어들어 이상하게 표기되어 항상 같은 크기로 유지하려고 하는데 방법이 있을까요?

아 네네 그러신거라면 아래 링크 답변과 같이 고정 위치를 갖는 Element를 올리시면 해결 됩니다.

답변 감사합니다.

해당 글을 읽어 봤습니다만 저는 맵 이동시 div위치도 같이 움직여야 합니다 ㅠㅠ

AbstractOverlay를 활용하여 고정을 시킬 수 있습니다.

아래 코드는 커스텀 타일셋1 예제와 AbstractOverlay를 사용하여 고정시킨 코드로 참고만 해주세요.

// 오버레이로 올릴 이미지의 bounds를 받아 AbstractOverlay를 생성합니다.
function GroundOverlay(bounds, imgSrc) {
    this.bounds = bounds;
	var node = this.node = document.createElement('div');
    node.className = 'node';
   
    var img = this.img = document.createElement('img');
    img.style.position = 'absolute';
    img.src = imgSrc;
    
    node.appendChild(img);
}

GroundOverlay.prototype = new kakao.maps.AbstractOverlay;
    
GroundOverlay.prototype.onAdd = function() {
     var panel = this.getPanels().overlayLayer;
	 panel.appendChild(this.node);
};

// 줌인 아웃 시 이미지를 원하는 bounds값에 맞게 표출하기 위해 img style을 정의 및 선언합니다.
GroundOverlay.prototype.draw = function() {
    var projection = this.getProjection();
    var ne = projection.pointFromCoords(this.bounds.getNorthEast());
    var sw = projection.pointFromCoords(this.bounds.getSouthWest());
    
    var width = ne.x - sw.x;
	var height = sw.y - ne.y;  
    
    this.img.style.top = ne.y+'px';
    this.img.style.left = sw.x+'px';
    this.img.style.width = width+'px';
    this.img.style.height = height+'px';
}
    
GroundOverlay.prototype.onRemove = function() {
   this.node.parentNode.removeChild(this.node);
};

// 해당 좌표는 예제 타일셋에서 projectionId: null로 선언이 되어 있기 때문에 pixel 좌표를 사용하였습니다.
var sw = new kakao.maps.Coords(500,0)
    ne = new kakao.maps.Coords(1000, -500);

var bounds = new kakao.maps.CoordsBounds(sw, ne);
    
var overlay = new GroundOverlay(bounds, 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadviewoverlay_img_02.png');
overlay.setMap(map);

lea.ju님 감사합니다.

해당 소스를 img 대신에 div로 바꿔서 해결했습니다.

다시한번 감사드려요^^

좋아요 1