원래 높이가 300px던 지도를 지도를 터치하면 풀 사이즈로 바꾼 뒤 움직이려고 하면
의도치 않게 멀리로 튑니다 ㅠㅠ
이유를 알 수 있을까요?
해당 영상 파일 입니다
흐름은 => 클릭 후 지도 크기 늘림 => 지도 영역을 누르고 살짝 밑으로 내렸습니다
코드는
지도 클릭하면 mapZoom 함수 실행
const map = document.querySelector('#map');
map.addEventListener('touchend', event => {
if (map.getAttribute('full') == 'false') {
mapZoom(false);
}
});
mapZoom 에서 지도 사이즈 조정 함수를 실행 합니다
const mapZoom = () => {
event.stopPropagation();
const map = document.querySelector('#map');
if (!!map.getAttribute('full') && map.getAttribute('full') == 'true') {
return;
}
resizeMap(true);
KAKAOMAP.setZoomable(true);
KAKAOMAP.setDraggable(true);
};
지도 사이즈 조정 함수 입니다
const resizeMap = bool => {
document.querySelector('#map').setAttribute('full', bool);
kakaoMapRelayout();
};
이런 css가 있어서 full에 true 를 주면 꽉차는 형식 입니다
.map[full="true"] {
height: calc(100vh - 56px) !important;
}