카카오맵 처음 로딩시 지도 깨짐 문제
본문
안녕하세요 카카오지도로 게시판 리스트 부분 작업중입니다..
마우스로 버튼을 클릭했을때 지도가 노출되고 숨겨지게 만들려고 하는데 문제는
처음 페이지를 로딩했을때 지도가 깨지는 문제가 발생합니다..
지도를 처음부터 오픈했을때는 정상적으로 나오지만 display:none를 했을때 무조건 깨지더군요.. 왜 그런건지 모르겠지만 다른 방법이 없을까 싶어서 질문을 올렸습니다
답변 부탁드립니다!
답변 2
2개를 한번에 열어보면 2번째부터 호출한 애는 버튼이 왼쪽으로 몰려있는거 처럼 보여요.
처음에 전체 리스트업 된 지도 목록을 먼저 생성한 후에 hide처리를 하면 되지 않을까 싶네요.
아니면 click시에 생성해서 보여주는 건 어떨지 싶네요.
답변해주셔서 감사합니다 다른방법으로 해결했네요
며칠동안 뻘짓한 끝에 노출되게 했네요
카카오지도를 display:none > display:block형식으로 작업하시는 분들은 참고하시는게 좋을것 같습니다
일단 https://apis.map.kakao.com/web/sample/mapRelayout/ 여기 내용을 참고하시는게 좋고
핵심은 map.relayout(); 와 map.setCenter(new kakao.maps.LatLng(위도, 경도)); 입니다
map.relayout(); 위치는 아무곳이나 상관없지만
map.setCenter(new kakao.maps.LatLng(위도, 경도));의 경우는
버튼을 호출하는 시점 쪽에 넣으시는게 좋으실 것 같습니다.
<div id="map_<?php echo $list[$i]['wr_id'] ?>" class="map_area" style="width: 100%; height: 500px; margin-top:50px; border-radius:4px;"></div>
<script>
var mapContainer = document.getElementById("map_<?php echo $list[$i]['wr_id'] ?>"), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(<?php echo $list[$i]['wr_5']?>, <?php echo $list[$i]['wr_6']?>), // 지도의 중심좌표
level: 4// 지도 초기 확대레벨
};
// 지도 생성
var map = new kakao.maps.Map(mapContainer, mapOption);
// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 마커
var marker = new kakao.maps.Marker({
map: map,
// 지도 중심좌표에 마커를 생성
position: map.getCenter()
});
marker.setMap(map);
//마커를 기준으로 가운데 정렬이 될 수 있도록 추가
var markerPosition = marker.getPosition();
map.relayout(); // 지도의 크기가 변동이 있을 경우 함수 호출
map.setCenter(markerPosition);
var content = "<div class=customoverlay>" +
" <a target='blink' href=http://<?php echo $list[$i]['wr_7'] ?>>" +
" <span class=title><?php echo $list[$i]['wr_subject']; ?></span>" +
" </a>" +
"</div>";
// 커스텀 오버레이가 표시될 위치입니다
var custPosition = new kakao.maps.LatLng(<?php echo $list[$i]['wr_5'] ?>, <?php echo $list[$i]['wr_6'] ?>);
// 커스텀 오버레이를 생성합니다
var customOverlay = new kakao.maps.CustomOverlay({
map: map,
position: custPosition,
content: content,
yAnchor: 1
});
$('.visit_line<?php echo $list[$i]["wr_id"] ?> .point_ico').click( function() {
$('.visit_line<?php echo $list[$i]["wr_id"] ?> .map_area').toggle();
map.setCenter(new kakao.maps.LatLng(<?php echo $list[$i]['wr_5'] ?>, <?php echo $list[$i]['wr_6'] ?>));
// 버튼을 클릭했을 때 지도가 노출되고 지도의 위치를 가운데로 잡아줌
});
답변을 작성하시기 전에 로그인 해주세요.
