마커 갯수가 많을 때, 렉 줄이는 방법

[hobbbbit]

네이버지도 API를 사용하면서 줌 레벨이 15일때에도 마커를 600개 정도 찍을 상황이 있는데 그럴때마다 드래그 할때나 줌 이동을 하면 렉이 발생되어 사용을 못할 정도입니다.

네이버페이부동산을 보면 줌 레벨이 15여도 마커가 500개 정도 있음에도 렉이 발생하지 않고 부드럽게 동작하는데 어떻게 그렇게 가능한지 궁금합니다!

[kkokko.jeong]

안녕하세요. 

제가 네이버부동산 페이지를 확인했을 때 줌 레벨 15 기준으로 마커 150~200개 정도인 것 같습니다.

 

브라우저 특성상 마커 (DOM) 많아질수록 이동 시 reflow, repaint 가 많이 발생합니다. 그래서 어쩔수없이 끊김 현상이 발생합니다.

위 방법을 해결하기 위해서는 아래 방법을 고려해야합니다.

-  보이는 지도 영역의 마커만 표시 https://navermaps.github.io/maps.js.ncp/docs/tutorial-marker-viewport.example.html

- 마커 클러스터화 https://navermaps.github.io/maps.js.ncp/docs/tutorial-marker-cluster.example.html

 

감사합니다.