7월 26일 목요일 TIL 회고록

개인 프로젝트 메인페이지 수정

---

문제 발생

 

원래는 메인페이지에서 마커를 누르고 닫으려고 버튼을 누르면 아래와 같은 오류가 나오면서 onclick이 먹히지 않았다.

Uncaught ReferenceError: closeOverlay is not defined at HTMLDivElement.onclick 

메인페이지를 만들때 고치려고 했으나 결국 포기했었다.. 이번에는 꼭 고쳐보자하여 하루종일 작업했다.

 

 

해결 과정 

https://apis.map.kakao.com/web/sample/removableCustomOverlay/

// 커스텀 오버레이에 표시할 컨텐츠 입니다
// 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
// 별도의 이벤트 메소드를 제공하지 않습니다 
var content = '<div class="wrap">' + 
            '    <div class="info">' + 
            '        <div class="title">' + 
            				title + 
            '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' + 
            '        </div>' + 
            '        <div class="body">' + 
            '            <div class="img">' +
            '                <img src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/thumnail.png" width="73" height="70">' +
            '           </div>' + 
            '            <div class="desc">' + 
            '                <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' + 
            '                <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' + 
            '                <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' + 
            '            </div>' + 
            '        </div>' + 
            '    </div>' +    
            '</div>';

원래 카카오 맵 샘플을 참고하여 이런식으로 구현했었다. onclick= "closeOverlay()" 가 먹통이었다.

 

구글링을 해보니 위에 코드는 하나의 마커에 할당된 하나의 오버레이를 사용하는 예제라고 적혀있었다. 링크

위에 링크에 들어가면 해결법도 나와있어서 참고를 아주 많이 했다.

 

해결 ( + 해결 방법)

createElement를 사용하여 위에 content 내용과 비슷하게 코드를 짜서 해결했다.

•  createElement 사용방법 : createElement로 태그나 요소를 생성하고 속성을 정의해서 append 한다.
  • appendChild와 append의 차이점
    • appendChild는 오직 Node 객체만 받을 수 있고, 한 번에 하나씩만 추가할 수 있다.
    • append는 여러개의 노드와 문자를 추가할 수 있다.
• .className : 클래스네임 설정
• onclick : onclick 이벤트 지정
• .createTextNode() :  선택한 요소에 텍스트를 추가한다.

var content = document.createElement('div');

var info = document.createElement('span');
    info.className = 'title';
    info.appendChild(document.createTextNode(title));
    content.appendChild(info);
                    

var closeBtn = document.createElement('button');
    closeBtn.appendChild(document.createTextNode('닫기'));
    closeBtn.onclick = function() {
         overlay.setMap(null)
      };

                    
content.appendChild(closeBtn);

content는 div 태그, info는 span 태그, closeBtn은 button 태그를 사용했다.

 

이렇게 만들었더니 가게 이름이 나오는 부분에 스타일이 없어 너무 보기에 안좋아서 스타일을 추가해주고 싶었다.

스타일을 찾는것도 되게 오래걸렸다. 여러 시도를 해봤지만 실패했었다 ㅠㅠ

 

var ex = document.createElement('div');
ex.className = 'ex';
ex.appendChild(document.createTextNode('info'));
content.appendChild(ex);

이런식으로.. 했었는데 결과는 역시 오류.. 이런식으로 몇번 반복하다 포기하고 구글에 createElement 스타일이라고 검색했더니

바로 하는법이 나왔다. 이 블로그를 참고했다.

 

 

전체 코드

var content = document.createElement('div');

var info = document.createElement('span');
	info.style.padding = 5 +"px" , 0+"px", 0+"px", 10+"px";
	info.style.height = 30+"px";
    info.style.background = "#eee";
    info.style.borderBottom = 1+"px" + "solid";
    info.style.font.Size = 18+"px";
    info.className = 'title';
    info.appendChild(document.createTextNode(title));
    content.appendChild(info);
                    

var closeBtn = document.createElement('button');
    closeBtn.appendChild(document.createTextNode('닫기'));
    closeBtn.onclick = function() {
         overlay.setMap(null)
      };

                    
content.appendChild(closeBtn);

 

결과

내가 생각했던 것이랑 다르지만.. 그래도 이제 보기에는 훨씬 좋아졌다. 대만족

무엇보다 아예 포기했던 부분인데 고쳐내서 정말 기분이 좋다. 이제.. 게시글 상세 조회 부분을 해봐야겠다.