카카오맵 전체화면 지도 위치 이동 문제
본문
안녕하세요 다른게 아니라
홈페이지에서 카카오맵을 띄웠는데..
여기서 버튼을 클릭 했을 때 카카오 맵만 전체화면이 되게 노출 할려고 작업을 하고 있습니다..
문제는...
전체화면을 했을때 위치가 정해놓은 좌표값 기준으로 가운데 정렬이 안되고 확대, 축소 레벨 값도 적용이 안되는데 뭐가 문제인지 모르겠네요..
전체화면을 해제했을 때는 작동이 잘되는데 전체화면일때만 안되서 고수님들께 물어봅니다..
혹시 참고하실분은 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에 맵 객체가 제대로 담겨있는지 확인 해보시고
모두 이상 없으면 지도 위 구석에 적당한 버튼 하나 임시로 만들어놓고 그 버튼에 줌 레벨 설정과 중앙 설정 기능만 따로 떼서 넣어놓고 최대화 후에 버튼 눌러서 기능 작동하는지 같은 식으로 한 단계씩 디버깅 하면서 어느 부분에 문제가 있는지 체크해보세요
그런데 전체화면 했을 때 뿐만 아니라 브라우저의 크기를 조금만 변경해도 줌 레벨과 중앙 설정이 계속 초기화되는걸 보면 원인이 전체화면에 있는게 아니라 브라우저 크기 변경 이벤트쪽에 관련이 있지 않을까 싶기도 합니다
안보인다는 그부분 링크를 알려주셔야되요~ 저렇게 보여주면 알수없어요
어쨋든 문제가 쿼리쪽 문제가 될수도 있고 php쪽 문제가 될수도있어요