• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

마커 클러스터 내의 텍스트 속성 지정 방법이 궁금합니다.

21.06.30 23:25 작성 조회수 193

0

클러스터의 크기를 키웠더니 사진과 같이 텍스트가 위로 쏠려 출력되고 있습니다. 정중앙에 배치하고 싶은데 어떻게 하면 될까요? 답변 주시면 감사하겠습니다.

답변 1

답변을 작성해보세요.

0

질문 주셔서 감사합니다:)

해당 코드와 css 코드를 첨부해주시면 빠르게 답변 드리도록 하겠습니다~!!

ndyd-admin님의 프로필

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님의 프로필

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);
}