728x90
반응형
- [ 언어·프레임워크/React.js ][React.js] 네이버 지도 API 리사이즈 트리거2024-12-17 20:25:051. 지도 영역 크기 변경 후 지도 잘림 현상 문제 발생좌측 aside를 숨기는 기능을 구현하였다. 메인 콘텐츠 영역에는 [그림 1]과 같이 네이버 지도가 렌더링 되어 있다. aside 숨김 버튼을 클릭하면 [그림 2]와 같이 지도 부분이 비정상적으로 잘려서 표시된다. 2. 지도 리사이즈 이벤트 강제 트리거로 문제 해결지도 영역 변경 발생 시 리사이즈 이벤트를 강제 트리거하여 문제를 해결하였다. 강제 트리거 방법은 " naver.maps.Event.trigger()"를 호출하는 것이다. 아래는 적용된 코드 예시이다.useEffect(() => { // naverMap은 useRef()이다. if (naverMap.current) { setTimeout(() => { const { nav..
- [ 언어·프레임워크/React.js ][React.js] 네이버 지도 API 지도 좌표 경계 확인하여 렌더링 줄이기2024-12-04 16:42:391. 히트맵 적용 후 성능 이슈히트맵에서 점의 크기는 radius 값으로 설정하는데 이 값이 100 이상 넘어가면 렌더링 성능이 떨어졌다. 이 문제를 해결하기 위한 하나의 방법으로 화면상에 노출된 좌표(위경도) 데이터만 필터링하는 방법을 적용해 보았다. 2. 지도 좌표 경계 확인 이용화면상에 노출된 좌표를 필터링하기 위해서는 지도 좌표 경계 확인이 필요했다. 아래는 관련 문서이다.※ React Naver Maps(지도 좌표 경계 확인하기) : https://zeakd.github.io/react-naver-maps/examples/map-tutorial-4-bounds/나의 경우 화면에 노출된 지도의 최대/최소 좌표 정보 획득이 필요했기 때문에 위 문서의 소스 코드 자체는 크게 도움이 되지 않았지만, u..
728x90
반응형