카카오맵 API를 이용하여 지도를 표시해주고있습니다.
몇몇건은 정상적으로 잘 나오는데 이미지처럼 몇건의 경우
화면이 전체적으로 나오지 않습니다. 클릭하거나 화면 확대 축소하면
저부분도 제대로 나오구요.
지도 비율을 줄여서 보면 또 표시가 잘됩니다.
주소 클릭할때마다 지도 표시부분만 변경되고 지도 사이즈나 배율은 그대로 가지고 가는데
뭐가 문제일까요?
지도가 바뀔때 마다 map.relayout 이걸 호출해보라 해서 했는데도 그대로 이네요.
특이한점은 한국기준으로 일본쪽과 북한쪽으로 넘어가는 부분만 깨져서 나옵니다.
음… relayout이 정상적으로 호출되지 않은것 같습니다.
아래 링크를 참고하여 화면 사이즈가 변경될 때 map.relayout()을 다시 호출해보세요.
https://devtalk.kakao.com/t/topic/44357/5
https://devtalk.kakao.com/t/topic/59015
댓글 감사합니다.
안그래도 링크해주신거 검색해서 적용해봤었는데
그대로이네요ㅠㅠ
본문에도 써놨듯이 화면 사이즈는 변경하는 부분은 없습니다.
위치랑 마커만 찍어주는데 뭐가 문제일까요…
외부에서 확인할 수 있는 페이지나 코드 첨부 부탁드립니다.
다른 컴퓨터와 브라우저에서 동일한 현상이 나타나는지도 확인 부탁드립니다.
지도 표시하는 소스코드입니다.!
다른 pc에서도 같은 증상 발생하네요
네 확인하고 답변드리겠습니다.
소스에 api key가 노출되어 있어 첨부 파일은 삭제하겠습니다.
에고 정신없어서 키값까지 그대로 올려버렸네요…
확인 감사드립니다^^
음… 첨부 코드에서 주소 검색 호출에 static한 값을 넣어 테스트해보았는데 잘 동작하네요…
기본적인 지도만 로드하여 동일한 현상이 일어나는지,
addressSearch 호출 시 콘솔 에러가 있는지 확인이 필요할 것 같습니다.
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) {
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
//var iwContent = '<div style="padding:5px;">'+ CODO_NAME.value +','+ CODO_ADDR.value +'</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
var iwContent = ""
iwContent += '<div style="padding:5px;">';
iwContent += ' <table width="200px">';
iwContent += ' <tr>';
iwContent += ' <td>';
iwContent += '<font style=font-size:12pt><strong>인포윈도우</strong></font>';
iwContent += ' </td>';
iwContent += ' </tr>';
iwContent += ' <tr>';
iwContent += ' </tr>';
iwContent += ' <tr>';
iwContent += ' <td>';
iwContent += '<font style=font-size:9pt>'+result[0].address_name+'</font>';
iwContent += ' </td>';
iwContent += ' </tr>';
iwContent += ' </div>';
// 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker);
});
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
현재 위와 같이 리스트가 보여지구 해당 라인클릭시
주소를 넘겨주어 지도 표시하는 소스를 호출하여 보여주고 있습니다.
addressSearch 호출시 콘솔 에러나는 부분없으며,
geocoder.addressSearch(‘제주특별자치도 제주시 첨단로 242’, function(result, status) —> 주소 고정시켜놓구
연속적으로 클릭할 경우, 정상적으로 표시되기도하지만 이미지 파일처럼 화면이 전부 로딩되지 않는 경우가
발생합니다.
(현재 주소 고정시켜놓구 호출하기때문에 위 리스트 주소와는 상관없이 같은 장소로 찍히게 되어있습니다 ㅠㅠ)
지도가 로딩되기전에 페이지 호출이 완료되어서 발생하는 경우일수도 있나요?
음… 인포윈도우의 문제일 수도 있을 것 같네요.
인포윈도우 생성시 기본적으로 panning 효과를 주는데 여러 인포윈도우 객체가 생성되면서
이 효과를 주다 보면 타일을 불러오는 로직에 영향을 줄 수 도 있습니다.
인포윈도우 생성 시 disableAutoPan: true 속성을 추가해서 다시 확인 부탁드립니다.
몇일동안 이것저것 알아보다가 해결되어 다른분들 참고하라고 글남깁니다ㅎㅎ
저 같은경우에 답글주신대로 전부 해보았는데 같은증상이었구요.
처음 mapOption 선언할때 level : 12 로 설정하였습니다.
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
map.setLevel(11);
map.relayout();
map.setLevel(12);
map.relayout();
map.relayout(); 이것만 호출할경우 같은 증상이였는데
이렇게 map level을 임의로 바꾸었다가 기존 설정대로 바꿔주니
정상적으로 작동하네요.