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