inflearn logo
강의

Course
Instructor

Creating a Map Service with the Corona Map Developer 2

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

337

ndyd-admin

2 asked

0

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

express mongodb 웹앱 nodejs mongoose

Answer 1

0

donghunee

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

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

0

ndyd-admin

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

0

ndyd-admin

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

안녕하세요 선생님 도와주세요

0

142

1

marker 크기 관련 질문

0

121

0

upload.css 관련 질문

0

108

1

mongoDB 관련 질문

0

154

1

키워드 검색 데이터 받아오기 강의중 문제 발생

0

246

1

404에러가 뜨네요 ㅠㅠ

1

371

1

카카오 api 발급 및 적용중에 upload 페이지가 뜨지를 않아서요.

0

259

1

키 발급 부탁드립니당!!

0

183

0

코드를 다운받을 수 있는 곳이 있나요?

0

208

0

서버 구축

0

305

0

인포박스가 생성되지 않아요

1

383

2

infowindow_wrap부터 css가 적용이 안돼요

0

250

0

화살표 함수 두번 쓰는 이유가 궁금합니다.

3

226

0

이거 좀 너무 "코드보고 따라치세요" 식 아닌가요?

3

244

1

로딩 속도를 높이는 방법이 궁금합니다.

0

281

1

헉! 저도 회원가입에서 막혔네요

1

210

1

-g로 설치하는 이유가 있나요?

1

191

1

강의 내용 외 문의

0

177

0

마커 기능 질문

1

171

1

script 태그에 있는 클라이언트 아이디가 github에 공개되지 않도록 올리는 방법이 있을까요?

1

433

1

웹 관련 문의

1

259

1

서버접속시 오류가 발생하네요

1

232

2

지도정보 표시

1

351

1

안녕하세요 강사님. ajax관련 질문을 남기고자 합니다.

1

340

1