안녕하세요 부동산 관련 사이트 개발하면서 다음지도 API 호출하면서 잘 사용중인데요
문의 내용 찾아보다가 막혀서 여쭤봅니다
function makeTradingCompare(jdataList){
var htmlStr = "";
var index = 0;
$(jdataList).each(function(){
htmlStr += "<div style='display: inline-block; width: 45%;'>";
htmlStr += "<div class='table_wrap'>";
htmlStr += "<table class='w_table w_table_center'>";
htmlStr += "<colgroup>";
htmlStr += "<col width='150px'>";
htmlStr += "<col width='*'>";
htmlStr += "</colgroup>";
htmlStr += "<tr style='cursor:pointer;'>";
htmlStr += "<td>"+this.bldgNm+"</td>";
htmlStr += "<td>"+this.roadNmAddr+"</td>";
htmlStr += "</tr>";
htmlStr += "<td colspan='2'><div id='kakaoMap"+index+"' style='width:100%;height:350px;'></div></td>";
htmlStr += "<tr>";
htmlStr += "</tr>";
htmlStr += "</table>";
htmlStr += "</div>";
htmlStr += "</div>";
$("#list_compare").html(htmlStr);
//compareKakaoMap(this.roadNmAddr, this.bldgNm, index); //카카오맵 호출
//console.log("** "+this.bldgNm);
//console.log("** "+this.roadNmAddr);
//console.log("** "+index);
index++;
});
console.log(htmlStr);
$("#list_compare").html(htmlStr);
index = 0;
$(jdataList).each(function(){
compareKakaoMap(this.roadNmAddr, this.bldgNm, index); //카카오맵 호출
index++;
});
}
function compareKakaoMap(roadNmAddr, bldgNm, index){
console.log(roadNmAddr, bldgNm, index);
var addr = bldgNm;
var mapContainer = document.getElementById("kakaoMap"+index), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.517954, 126.5213165), // 지도의 중심좌표
level: 4 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
//map.relayout();
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소-좌표 담기
var coords = new kakao.maps.LatLng(33.517954, 126.5213165);
if(bldgNm == null || bldgNm == "")
{
addr = roadNmAddr;
}
geocoder.addressSearch(roadNmAddr, function(result, status) {
//console.log(4);
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:5px;font-size:12px;">'+addr+'</div>'
});
infowindow.open(map, marker);
}
}); // end addressSearch
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
// 마우스 드래그로 지도 이동 막기
//map.setDraggable(false);
// 마우스 휠로 지도 확대,축소 막기
//map.setZoomable(false);
}.
위와 같은 코드 형식으로 호출을 하면 지도는 표현 되는데 깨져서 나오는게
동적으로 가져와서 깨지는게 아닌가 싶더라구요
동적으로 가져올때 뭘 더 추가해야하는건지ㅠ
일단 맵이 끝에 하나만 나오는건 해결했고 깨짐 현상만 해결이 안되서 여쭤봅니다