로드뷰에 오버레이 클릭 이벤트 질문있습니다

지도/로컬 API
1 
   kakao.maps.event.addListener(rv, 'init', function() {
        
        var xx = new kakao.maps.LatLng(37.415317830637015, 126.56228398820636);  
        var content = '<div class="overlay_info" onclick="roadOverlayClick(\'' + rv + '\',\'' + xx + '\')">테스트 오버레이</div>';
        // 커스텀 오버레이를 생성합니다
        var rvCustomOverlay = new kakao.maps.CustomOverlay({
            position: xx,
            content: content,
            xAnchor: 0.5, // 커스텀 오버레이의 x축 위치입니다. 1에 가까울수록 왼쪽에 위치합니다. 기본값은 0.5 입니다
            yAnchor: 0.5 // 커스텀 오버레이의 y축 위치입니다. 1에 가까울수록 위쪽에 위치합니다. 기본값은 0.5 입니다
        });

        //rvCustomOverlay.setAltitude(2); //커스텀 오버레이의 고도값을 설정합니다.(로드뷰 화면 중앙이 0입니다)
        rvCustomOverlay.setMap(rv);

        var projection = rv.getProjection(); // viewpoint(화면좌표)값을 추출할 수 있는 projection 객체를 가져옵니다.

        // 커스텀오버레이의 position과 altitude값을 통해 viewpoint값(화면좌표)를 추출합니다.
        var viewpoint = projection.viewpointFromCoords(rvCustomOverlay.getPosition(), rvCustomOverlay.getAltitude());

        rv.setViewpoint(viewpoint); //커스텀 오버레이를 로드뷰의 가운데에 오도록 로드뷰의 시점을 변화 시킵니다.
        });

위 코드를 사용해 로드뷰에 아래 사진처럼 오버레이를 올렸습니다.
캡처

다시 위 코드를 보시면 콘텐트에 클릭 이벤트를 넣어 저 오버레이 근처에 사진을 삽입하려 합니다.
function roadOverlayClick(rv, xx)
{
// var img = document.createElement(‘img’);
// img.id = ‘overlayImg’;
// img.src = ‘/images/GNSS.png’;

    var content = '<div class="overlay_info">테스트 오버레이ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ</div>';

    alert(img);

    //커스텀 오버레이를 로드뷰 위에 올립니다.
    var rvCustomOverlay  = new kakao.maps.CustomOverlay({
        position:  xx,
        content: content
    });

    rvCustomOverlay.setMap(rv);
}

코드상에 문제가 있는지 궁금합니다… roadOverlayClick 함수는 실행 되는걸 확인 했습니다. 질문을 너무 자주드리네요 죄송합니다

2

아래 답변같이 컨텐츠를 HTMLElement로 생성해서 이벤트를 걸어주세요.
https://devtalk.kakao.com/t/topic/109275/2?u=lea.ju

3

답변 감사합니다.

1개의 좋아요