안녕하십니까. requestFullscreen을 사용하여 map을 전체화면 모드로 전환하게 되면
맵이 좌측 상단에 위치하는 문제를 해결하기 위해서 map.relayout을 실행해 보았습니다만 해결이 되지 않았습니다.
개발자 도구에서 확인해 보았을땐 map의 width와 height가 화면 전체를 차지하고 있는데 map.relayout을 실행시켰을때
지도가 화면에 맞춰지지 않는 이유가 궁금합니다.
// 전체화면 모드로 전환
const onFullScreenMap = () => {
if (mapContainerRef.current?.requestFullscreen) {
mapContainerRef.current.requestFullscreen()
setIsFull(true);
map.relayout();
}
};
return (
<div ref={mapContainerRef>
<div id="map" style={{width: '100%', height: '100%'}}></div>
<button onClick={onFullScreenMap}></button>
</div>
)
전체화면 이전
전체화면 이후
안녕하세요~
우선 현재 단순한 샘플코드를 통해 테스트를 수행했을때는
아무런 문제가 발생하지 않습니다.
<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>
<butto onclick="start()">fullscreen</button>
<script>
function start(){
const ref = document.getElementById('map');
const p = ref.requestFullscreen();
p.then(()=>{ console.log('전체화면 완료'); });
}
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
</script>
같은 재현환경을 만들 수가 없기 때문에, 해당 현상의 원인을 파악하긴 어려울것 같습니다.
리액트 환경이라서, 리액트의 라이프사이클에 따른 충돌일 수도 있고 원인은 다양할 수 있습니다.
다만 올려주신 코드에서 map.relayout의 경우, 전체화면이 완료된 다음에 실행되지 않습니다.
requestFullscreen()의 경우 Promise를 리턴하게 됩니다.
그리고 전체화면이 완료되면 resolve()를 실행하게 되는데,
그 콜백에서 map.relayout()을 한번 해보시면 좋을 것 같습니다.
