안녕하세요.
제가 커스텀 타일셋으로 작업하고있는데 커스텀 타일셋 크기만큼 커스텀 오버레이를 올려서 거기에 DIV로 표시하는 기능을 만들었습니다.
그런데 맵을 움직이면 커스텀 오버레이가 안보일때도 있고 줌인을 하면 크기 1/4크기로 변경되어서 크기를 고정시키고 항상 떠있을 수 있도록 할 수 있는 방법이 있나요?
꼭 커스텀 오버레이를 사용안해도 됩니다.
음… 어느 부분에서 커스텀 타일셋과 커스텀 오버레이를 사용하는지는 잘 모르겠습니다만
고정으로 원하는 콘텐츠를 항상 표시하고 싶으시면 아래 예제를 활용할 수 있을 것 같습니다.
http://apis.map.kakao.com/web/sample/customOverlay2/
사진보시면 빨갛게 보이는 곳이 커스텀 오버레이를 올려서 거기에 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개의 좋아요