카카오맵 전체화면 지도 위치 이동 문제

카카오맵 전체화면 지도 위치 이동 문제

QA

카카오맵 전체화면 지도 위치 이동 문제

본문

안녕하세요 다른게 아니라

홈페이지에서 카카오맵을 띄웠는데..

여기서 버튼을 클릭 했을 때 카카오 맵만 전체화면이 되게 노출 할려고 작업을 하고 있습니다..

 

문제는...

전체화면을 했을때 위치가 정해놓은 좌표값 기준으로 가운데 정렬이 안되고 확대, 축소 레벨 값도 적용이 안되는데 뭐가 문제인지 모르겠네요..

 

전체화면을 해제했을 때는 작동이 잘되는데 전체화면일때만 안되서 고수님들께 물어봅니다..

 

혹시 참고하실분은 https://nlobby.com/bbs/board.php?bo_table=reserve 여기 보시면 될것 같습니다


        var mapContainer = document.getElementById('map') // 지도를 표시할 div
        mapOption = {
          center: new kakao.maps.LatLng(<?php echo $lat ?>, <?php echo $lng ?>), // 지도의 중심좌표
          level: 13
          // 지도 초기 확대레벨
        };

 
        var map = new kakao.maps.Map(mapContainer, mapOption);
        // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
        var mapTypeControl = new daum.maps.MapTypeControl();
        // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
        // daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
        map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
        // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
        var zoomControl = new daum.maps.ZoomControl();
        map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
          <?php
            $gu = str_replace("/","",$_GET['gubun']);
 
              if($_GET['gubun']=="") {
                 $sql = " select * from g5_write_".$bo_table." order by wr_id asc ";
              } else {
              $sql = " select * from g5_write_".$bo_table." where ca_name='".$gu."' order by wr_id asc ";
              }
 
              $result = sql_query($sql);
              $cnt = 0;
              while ($row = sql_fetch_array($result)) {
                if($row['wr_5'] && $row['wr_6']) {
          ?>
 
          var imageSrc = '<?php echo $board_skin_url ?>/img/markerStar6.png',
          imageSize = new kakao.maps.Size(), // 마커이미지의 크기입니다
          imageOption = {offset: new kakao.maps.Point(12, 35)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
         
          // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
          var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
          markerPosition = new kakao.maps.LatLng(<?php echo $row['wr_5'] ?>, <?php echo $row['wr_6'] ?>); // 마커가 표시될 위치입니다
         
         
          // 마커를 생성합니다
          var marker = new kakao.maps.Marker({
            position: markerPosition,
            image: markerImage // 마커이미지 설정
          });
         
          // 마커가 지도 위에 표시되도록 설정합니다
          marker.setMap(map);  
         
           var content = "<div class=customoverlay>" + "<a href=<?php echo $row['wr_7'] ?> target='blink'>" + "<span class=title><?php echo $row['wr_subject']; ?></span>" + "</a>" + "</div>";
           
         
          // 커스텀 오버레이가 표시될 위치입니다
          var position = new kakao.maps.LatLng(<?php echo $row['wr_5'] ?>, <?php echo $row['wr_6'] ?>);
         
          // 커스텀 오버레이를 생성합니다
          var customOverlay = new kakao.maps.CustomOverlay({
            map: map,
            position: position,
            content: content,
            yAnchor: 1
          });
 
          <?php
            $cnt++;
          }
        }
        ?>
 
       // 전체화면 실행 및 브라우저에 따른 전체화면
        function openFullScreen(idTag){
          var elem = document.getElementById(idTag); // #map
          // if (!elem) alert("specify element for full screen.")
          console.log(elem)
          if (elem.requestFullscreen) {
            elem.requestFullscreen();
          } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
          } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen()
          } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen()
          }
        }
 
        // 전체화면 실행 시 적용될 카카오 맵
        function fullScreenMove(){
          mapContainer.style.width = screen.width + 'px';
          mapContainer.style.height = screen.height + 'px';
          openFullScreen('map');
          var moveLatLon = new kakao.maps.LatLng(<?php echo $lat ?>, <?php echo $lng ?>);
          console.log(moveLatLon)
          map.setLevel(5);
          map.relayout();
          map.setCenter(moveLatLon);
        };
 
        // FullScreen에서 ESC할 경우 작동
        document.addEventListener('fullscreenchange', exitHandler);
        document.addEventListener('webkitfullscreenchange', exitHandler);
        document.addEventListener('mozfullscreenchange', exitHandler);
        document.addEventListener('MSFullscreenChange', exitHandler);
        function exitHandler() {
          if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
            var mapContainer = document.getElementById('map');
            mapContainer.style.width = '100%';
            mapContainer.style.height = '850px';
            var moveLatLon = new kakao.maps.LatLng(<?php echo $lat ?>, <?php echo $lng ?>);
            map.setLevel(13);
            map.relayout();
            map.setCenter(moveLatLon);
          }
        }

이 질문에 댓글 쓰기 :

답변 2

fullScreenMove 함수에는 var mapContainer = document.getElemenyById('map'); 이게 빠지는게 맞나요?

아무튼.. 최대화 후 moveLatLon에 제대로 된 위경도 값이 담겨있는지, map에 맵 객체가 제대로 담겨있는지 확인 해보시고

모두 이상 없으면 지도 위 구석에 적당한 버튼 하나 임시로 만들어놓고 그 버튼에 줌 레벨 설정과 중앙 설정 기능만 따로 떼서 넣어놓고 최대화 후에 버튼 눌러서 기능 작동하는지 같은 식으로 한 단계씩 디버깅 하면서 어느 부분에 문제가 있는지 체크해보세요

그런데 전체화면 했을 때 뿐만 아니라 브라우저의 크기를 조금만 변경해도 줌 레벨과 중앙 설정이 계속 초기화되는걸 보면 원인이 전체화면에 있는게 아니라 브라우저 크기 변경 이벤트쪽에 관련이 있지 않을까 싶기도 합니다

답변 감사합니다.
var mapContainer = document.getElemenyById('map'); 이게 빠져있어서 추가는 했는데
그래도 결과는 똑같이 나오더군요..
그냥 일반지도로 했을 때는 정상적으로 작동이 되는데 원인은 아직 못찾은것 같습니다..
조금 더 찾아봐야겠네요..

//브라우저가 리사이즈될때 지도 리로드

$(window).on('resize', function () {
    var markerPosition = new kakao.maps.LatLng(35.926775290347, 127.67659395139);
        map.setCenter(markerPosition)
        map.setLevel(13);
});

이 부분을 지워보고 한번 해보시죠?
이런 기능이 있으면 fullScreenMove 함수 발생 이후 리사이즈 이벤트가 다시 발생해서 지도를 초기화해줄 수 있습니다

엇 해결되었습니다! 어쩐지 지도가 전체화면으로 전환될때 확대되는 모습이 살짝 보였다가 다시 리사이즈가 되는 현상이 있었는데 이거때문이었네요.. 정상적으로 되는것 같습니다!

번거롭게 해드려서 죄송했는데 알려주셔서 정말 감사합니다!

안보인다는 그부분 링크를 알려주셔야되요~ 저렇게 보여주면 알수없어요 

어쨋든 문제가 쿼리쪽 문제가 될수도 있고 php쪽 문제가 될수도있어요 

답변을 작성하시기 전에 로그인 해주세요.
전체 11
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT