-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
마커 클러스터 내의 텍스트 속성 지정 방법이 궁금합니다.
21.06.30 23:25 작성 조회수 193
0
클러스터의 크기를 키웠더니 사진과 같이 텍스트가 위로 쏠려 출력되고 있습니다. 정중앙에 배치하고 싶은데 어떻게 하면 될까요? 답변 주시면 감사하겠습니다.
답변을 작성해보세요.
0
ndyd-admin
질문자2021.07.07
index.ejs의 클러스터 지정 부분 코드입니다.
const cluster1 = {
content: `<div class="cluster1"></div>`,
};
const cluster2 = {
content: `<div class="cluster2"></div>`,
};
const cluster3 = {
content: `<div class="cluster3"></div>`,
};
const cluster4 = {
content: `<div class="cluster4"></div>`,
};
const cluster5 = {
content: `<div class="cluster5"></div>`,
};
const markerClustering = new MarkerClustering({
minClusterSize : 2,
maxZoom:20,
map : map,
markers: markerList,
disableClickZoom:false,
gridSize: 100,
icons: [cluster1, cluster2, cluster3, cluster4, cluster5],
indexGernerator: [100, 300, 500, 700, 1000],
stylingFunction: (clusterMarker, count) => {
$(clusterMarker.getElement()).find("div:first-child").text(count);
},
});
ndyd-admin
질문자2021.07.07
style.css의 코드입니다.
body {
padding: 0px !important;
margin: 0px !important;
}
#navbar {
height: 50px;
width: 100%;
background: linear-gradient(to right, #9aedcb, #99CCFF);
color: white;
font-weight: bolder;
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
}
#infoTitle{
font-size: 15px;
font-weight: bolder;
}
.marker {
border: 1px solid white;
background: blue;
opacity : 0.8;
width: 20px;
height: 20px;
border-radius: 50%;
}
.infowindow_wrap {
background : white;
padding: 20px;
border : 1px solid rgba(0,0,0,0.2);
}
.infowindow_title {
font-size : 15px;
font-weight: bolder;
}
.infowindow_content {
font-size : 13px;
font-weight : normal;
}
.infowindow_date {
font-size : 13px;
font-weight: normal;
}
#current {
position: absolute;
top: 100px;
z-index: 10000;
background: white;
left: 20px;
padding: 15px;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 4px;
text-align: center;
cursor: pointer;
font-weight: bolder;
}
.pulse {
display: block;
width: 22px;
height: 22px;
border-radius : 50%;
cursor : pointer;
box-shadow: 0 0 0 rgb(255, 0, 0);
animation: pulse 1.7s infinite;
}
#search {
position: absolute;
top: 100px;
left: 140px;
padding: 15px;
z-index: 10000;
background: white;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 4px;
text-align: center;
}
#search_input {
border: none;
}
#search_input:focus{
outline: none;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(204, 49, 44, 0.4);
-moz-box-shadow: 0 0 0 0 rgba(204, 49, 44, 0.4);
}
70% {
box-shadow: 0 0 0 20px rgba(204, 49, 44, 0);
-moz-box-shadow: 0 0 0 20px rgba(204, 49, 44, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(204, 49, 44, 0);
-moz-box-shadow: 0 0 0 0 rgba(204, 49, 44, 0);
}
}
@-webkit-keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(204, 49, 44, 0.4);
-moz-box-shadow: 0 0 0 0 rgba(204, 49, 44, 0.4);
}
70% {
box-shadow: 0 0 0 20px rgba(204, 49, 44, 0);
-moz-box-shadow: 0 0 0 20px rgba(204, 49, 44, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(204, 49, 44, 0);
-moz-box-shadow: 0 0 0 0 rgba(204, 49, 44, 0);
}
}
.cluster1{
width:30px;
height:30px;
line-height:26px;
font-size:10px;
border-radius: 50%;
color: white;
text-align: center;
font-weight: bold;
background-color: rgba(44, 165, 114, 0.7);
}
.cluster2{
width:35px;
height:35px;
line-height:31px;
font-size:11px;
border-radius: 50%;
color: white;
text-align: center;
font-weight: bold;
background-color: rgba(11, 148, 228, 0.7);
}
.cluster3{
width:40px;
height:40px;
line-height:31px;
font-size:12px;
border-radius: 50%;
color: white;
text-align: center;
font-weight: bold;
background-color: rgba(59, 38, 252, 0.7);
}
.cluster4{
width:45px;
height:45px;
line-height:31px;
font-size:13px;
border-radius: 50%;
color: white;
text-align: center;
font-weight: bold;
background-color: rgba(255, 24, 217, 0.7);
}
.cluster5{
width:50px;
height:50px;
line-height:31px;
font-size:14px;
border-radius: 50%;
color: white;
text-align: center;
font-weight: bold;
background-color: rgba(255, 40, 40, 0.7);
}
답변 1