[바미] script 태그에 Node.js DB 데이터 넣기

보통 Node에서 DB데이터를 가져와 ejs 파일에 넣으려 할 때 <%=%>태그를 사용하여 <%=row변수%>형태로 사용하실 겁니다.

 

카카오 맵을 사용하다보니 <script>태그를 사용하여 구현하게 되었고, X좌표,Y좌표,기타 등등의 데이터를 DB에서 가져오고 싶었습니다.

 

그 때는 

 

let data = '<%=rowdata%>';

이런식으로 선언하여 사용하시면 됩니다.

저는 이 방법을 사용하여 제가 그리고 싶은 지도의 위도 경도, 그 외 데이터들을 가져왔습니다.

 

혹여나 DB데이터에 있는 좌표값으로 표시하고 싶은 분들을 위해 공유해봅니다.

  <script>
    var lateX = '<%=row[i].LateX%>'; 
    var lateY = '<%=row[i].LateY%>'; 
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
        mapOption = { 
            center: new kakao.maps.LatLng(lateX, lateY), // 지도의 중심좌표
            level: 2 // 지도의 확대 레벨
        };

    var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

    // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
    var mapTypeControl = new kakao.maps.MapTypeControl();

    // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
    // kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
    map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);

    // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
    var zoomControl = new kakao.maps.ZoomControl();
    map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
    // 37.549219 127.128118
    // 지도에 마커를 표시합니다 
    var marker = new kakao.maps.Marker({
        map: map, 
        position: new kakao.maps.LatLng(lateX, lateY)
    });


    // 커스텀 오버레이에 표시할 컨텐츠 입니다
    // 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
    // 별도의 이벤트 메소드를 제공하지 않습니다 
    var content = '<div class="wrap">' + 
                '    <div class="info">' + 
                '        <div class="title">' + 
                '            <%=row[i].Name%>' + 
                '            <div class="close" onclick="closeOverlay()" title="닫기"></div>' + 
                '        </div>' + 
                '        <div class="body">' + 
                '            <div class="img">' +
                '                <img src="<%=row[i].IMG%>" width="73" height="70">' +
                '           </div>' + 
                '            <div class="desc">' + 
                '                <div class="ellipsis"><%=row[i].Locate%></div>' + 
                '                <div class="jibun ellipsis"><%=row[i].Post%></div>' + 
                '                <div><a href="<%=row[i].HomePage%>" target="_blank" class="link">홈페이지</a></div>' + 
                '            </div>' + 
                '        </div>' + 
                '    </div>' +    
                '</div>';

    // 마커 위에 커스텀오버레이를 표시합니다
    // 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
    var overlay = new kakao.maps.CustomOverlay({
        content: content,
        map: map,
        position: marker.getPosition()
    });

    // 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
    kakao.maps.event.addListener(marker, 'click', function() {
        overlay.setMap(map);
    });

    // 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
    function closeOverlay() {
        overlay.setMap(null);
    }
</script>