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

지도/로컬 API
1

안녕하세요

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

가능한지 알고 싶습니다.

감사합니다.

2

https://devtalk.kakao.com/t/topic/86185/6?u=doji.doo

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

3

답변 감사합니다.

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

감사합니다.

4

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

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

5

답변 감사합니다.

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

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

답변 부탁드립니다.

감사합니다.

6 
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);
7

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