지도에 이미지를 추가하고 싶습니다

안녕하세요

구글에는 지도에 마커가 아니라 특정 이미지를 지도의 일정 범위에 추가 할 수 있는데
카카오맵 지도 예제에는 마커나 도형은 있는데 이미지 추가는 안보이네요.

가능한지 알고 싶습니다.

감사합니다.

해당 코드를 참고해 주세요.

답변 감사합니다.

제가 html 로 만들고 있는데 보내주신 예제의 의미를 잘 모르겠습니다.
기존에 제공해 주고 계시는 예제들 처럼 바로 실행 되게 전체 코드를 보여주실수 있는지요.

감사합니다.

제가 최초 질문의 의도를 넘겨 짚은게 아니라면 위의 링크된 답변이면 충분하다고 생각됩니다.
GroundOverlay 구현체를 작성해 드렸고
코드 말미에 사용 방법 또한 샘플 코드로 다 보여드렸거든요.

위 답변으로 충분하지 않다고 생각하신다면
질문을 좀 더 구체적으로 부탁드립니다.

답변 감사합니다.

예제에선 화면 좌표로 되어 있는데 그것을 lat lng 좌표로 설정 해서 화면에 나타나게 할 수 있나요?

그리고 화면 이동은 이미지가 같이 따라오는데 화면 확대축소시엔 기존 이미지 사이즈가 그대로네요. 이때도 구글 api 처럼 이미지 크기가 지도의 크기와 동기화 되게 할수 있는지요.

답변 부탁드립니다.

감사합니다.

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(37.502, 127.026581), // 지도의 중심좌표
        level: 4 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 오버레이로 올릴 이미지의 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);
};

// LatLng, LatLngBounds 를 사용하는 코드로 변경해야 함.
var sw = new kakao.maps.LatLng(37.503, 127.022581);
    ne = new kakao.maps.LatLng(37.5, 127.028581);

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

잘되네요^^ 감사합니다.