Vue.js 카카오맵 지도 위에 커스텀 오버레이 표시하기

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

카카오 맵에 기능을 적용시킬때는 대부분 이 Developers 문서를 사용하면 해결됩니다.

하지만 저 같은 경우 적용되지 않는 부분이 있었고, 이 방법을 사용하여 해결 할 수 있었습니다.

 

원래 이런식으로 백틱을 사용하여 하는 것이지만 이 방법이 잘 안된다면 아래 코드를 참고해 보세요

(*아래 코드는 위의 코드를 바꾼 코드가 아닙니다! 아래가 전체코드)

var content = `
		<div class="overlaybox">
			<div class="boxtitle">${title}</div>
			<div class="first"><img src="${root}/그림 경로"></div>
			<ul>
				<li class="up">
					<span class="title">년도</span>
					<span class="count">${place.year}</span>
				</li>
				<li>
					<span class="title">주소</span>
					<span class="count">${place.city} </span>
				</li>
				<li>
					<span class="title">금액</span>
					<span class="count">${place.price}</span>
				</li>
                                                  .
                                                  .
                                                  .
			</ul>
		</div>
	`;

 

수정한 전체 코드

var content = document.createElement("div");
        content.className = "overlaybox";

        var title = document.createElement("div");
        title.className = "map-popup-title";

        var aptname = document.createElement("span");
        aptname.className = "boxtitle";
        aptname.appendChild(document.createTextNode(pos.name));
        title.appendChild(name);
        content.appendChild(title);

        var ulinfo = document.createElement("ul");

        var liinfo1 = document.createElement("li");
        var addrtitle = document.createElement("span");
        addrtitle.className = "title";
        liinfo1.appendChild(addrtitle);
        var addr = document.createElement("span");
        addr.className = "count";
        addr.appendChild(
          document.createTextNode(pos.city)
        );
        liinfo1.appendChild(addr);
        ulinfo.appendChild(liinfo1);

        var liinfo2 = document.createElement("li");
        var yeartitle = document.createElement("span");
        yeartitle.className = "title";
        yeartitle.appendChild(document.createTextNode("년도:"));
        liinfo2.appendChild(yeartitle);
        var year = document.createElement("span");
        year.className = "year";
        year.appendChild(document.createTextNode(pos.year + "년"));
        liinfo2.appendChild(year);
        ulinfo.appendChild(liinfo2);

        var liinfo3 = document.createElement("li");
        var pricetitle = document.createElement("span");
        pricetitle.className = "title";
        pricetitle.appendChild(document.createTextNode("금액:"));
        liinfo3.appendChild(pricetitle);
        var price = document.createElement("span");
        price.className = "price";
        price.appendChild(document.createTextNode(pos.price + "(만원)"));
        liinfo3.appendChild(price);
        ulinfo.appendChild(liinfo3);

        content.appendChild(ulinfo);

        var buttonContainer = document.createElement("div");
        buttonContainer.className = "popup-buttons";

	// 더하기 버튼(이미지 버튼)
        var addBtn = document.createElement("button");
        addBtn.className = "popup-button";
        var add = document.createElement("img");
        add.className = "btn";
        add.src =
          "그림 주소";
        add.appendChild(add);
        add.onclick = () => {
          if (!isMember) {
            alert("회원만 사용가능한 기능입니다.");
          } else {
            console.log(memberid, pos.code);
            const params = {
              userId: memberid,
              aptCode: pos.code,
            };
            add(
              params,
              ({ data }) => {
                let msg = "실패!";
                if (data === "success") {
                  msg = "성공";
                }
                alert(msg);
              },
              (error) => {
                console.log(error);
              }
            );
          }
        };

	// 닫기 버튼(이미지 버튼)
        var closeBtn = document.createElement("button");
        closeBtn.className = "popup-button";
        var ximg = document.createElement("img");
        ximg.className = "btn";
        ximg.src =
          "그림 주소";
        closeBtn.appendChild(ximg);
        closeBtn.onclick = function () {
          overlay.setMap(null);
        };

        buttonContainer.appendChild(closeBtn);
        buttonContainer.appendChild(addBtn);

        content.appendChild(buttonContainer);

        kakao.maps.event.addListener(marker, "click", function () {
          overlay.setMap(map);
        });

        overlay.setContent(content);