카카오맵 사이트의 로드뷰에서는 윈도우 화면을 줄인 후 드래그하여 resize하면 드래그 하는 동안과 마우스를 뗀 후에도 해당 화면의 비율에 맞게 1:1로 조정이 잘 되는데,
제 화면에서는 아래 사진과 같이 로드뷰가 깨집니다.
이게 전체화면일 때는 괜찮은데 윈도우 화면이 축소된 상태일 때
드래그 하는 동안 화면이 깨지고, 마우스를 떼면 잠시 후에 정상으로 돌아갑니다.
어떻게 처리해야 할지 조금 어렵네요…ㅜㅜ
아래 자바스크립트 코드 첨부합니다.
function initResizable() {
// div 요소 선택
const kakaoMap = document.querySelector(‘#kakaoMap’);
const roadview = document.querySelector(‘#roadview’);
// resizer 핸들러 요소를 선택
const resizer = document.querySelector(‘#kakaoMap .resizer’);
// 최소 사이즈 설정
const min_width = 170;
const min_height = 130;
// 최대 사이즈 설정
const max_width = window.innerWidth;
const max_height = window.innerHeight;
// 초기 너비와 높이
let original_width = 310;
let original_height = 190;
// 초기 위치 설정
let original_x = 0;
let original_y = 0;
// 마우스 초기 위치 설정
let original_mouse_x = 0;
let original_mouse_y = 0;
// 마우스 다운 이벤트 핸들러 등록
resizer.addEventListener('mousedown', function(e) {
// 기본 이벤트 방지
e.preventDefault();
// resizable 이전의 요소의 현재 스타일 값을 가져와서 파싱하여 초기 값 설정
original_width = parseFloat(getComputedStyle(kakaoMap, null).getPropertyValue('width').replace('px', ''));
original_height = parseFloat(getComputedStyle(kakaoMap, null).getPropertyValue('height').replace('px', ''));
// 요소의 초기 위치 설정
original_x = kakaoMap.getBoundingClientRect().left;
original_y = kakaoMap.getBoundingClientRect().top;
// 초기 마우스 위치 설정
original_mouse_x = e.pageX;
original_mouse_y = e.pageY;
// 마우스 이동 이벤트 리스너 등록
window.addEventListener('mousemove', resize);
// 마우스 업 이벤트 리스너 등록
window.addEventListener('mouseup', stopResize);
});
// 마우스 이동 이벤트 핸들러 함수 정의
function resize(e) {
// 새로운 너비 계산
let width = original_width + (e.pageX - original_mouse_x);
// 새로운 높이 계산
let height = original_height - (e.pageY - original_mouse_y);
// 너비 조정
if (width <= min_width) {
width = min_width;
// 최대 넓이는 로드뷰와 1:1
} else if (width >= max_width / 2) {
width = max_width / 2;
}
// 높이 조정
if (height <= min_height) {
height = min_height;
// 최상단에 닿아있을 때
} else if (height >= max_height) {
// 카카오맵은 최대 높이로 설정
height = max_height;
// 로드뷰 위치 조정
const rv_width = window.innerWidth - width;
roadview.style.width = rv_width + 'px';
roadview.style.left = width + 'px';
// 내려와있을 때는 카카오맵에 맞추기
} else if (height < max_height) {
roadview.style.width = 'auto';
roadview.style.left = 'auto';
}
kakaoMap.style.width = width + 'px';
kakaoMap.style.height = height + 'px';
rv.relayout();
map.relayout();
map.setCenter(mapWalker.walker.getPosition());
}
// 마우스 업 이벤트 핸들러 함수 정의
function stopResize() {
// 마우스 이동 및 업 이벤트 리스너 제거
window.removeEventListener('mousemove', resize);
window.removeEventListener('mouseup', stopResize);
}
}
#kakaoMap {
position: absolute;
width: 310px;
height: 190px;
bottom: 0px; /* 15px /
left: 0px; / 15px */
top: auto;
border-radius: 2px;
z-index: 2;
}
#roadview.active {
width: 100%; /* roadview를 100% 너비로 설정 */
height: 100%;
position: relative;
z-index: 1;
}