안녕하세요.
IE 버전 11로 마커클릭시 커스텀오버레이 생성하는부분을 하고있는데
크롬에서는 문제없이 동작하는데 IE에서는 전혀동작을 하지않습니다.
지도와 마커는 화면상에 나타나는데 마커클릭시 실행되는 커스텀오버레이가 표출이되지않습니다 ㅠㅠ 조언부탁드립니다.
function displayMarker(data){
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: data.latlng, // 마커를 표시할 위치
image : markerImage // 마커 이미지
});
//커스텀오버레이 생성
var customOverlay = new kakao.maps.CustomOverlay({
position: marker.getPosition()
});
var div_1 = document.createElement('div');
div_1.className = "popup_wrap popup_map";
div_1.style = "display: block";
var div_2 = document.createElement('div');
div_2.className = "popup_con";
var div_3 = document.createElement('div');
div_3.className = "pop_tit_box";
var h5_1 = document.createElement('h5');
h5_1.className = "pop_tit1";
h5_1.innerHTML = data.cellnm + " (" + data.mknm + ")";
var button_1 = document.createElement('button');
button_1.className = "map_x";
button_1.innerHTML = "팝업 닫기";
button_1.onclick = function(){
customOverlay.setMap(null);
}
var div_4 = document.createElement('div');
div_4.className = "pop_con_box";
var ul_1 = document.createElement('ul');
ul_1.className = "park_list";
var div_5 = document.createElement('div');
div_5.className = "common_btn_box";
var button_2 = document.createElement('button');
button_2.className = "common_btn btn_pop";
button_2.innerHTML = "신청하기";
button_2.onclick = function(){ }
div_1.appendChild(div_2);
div_2.appendChild(div_3);
div_2.appendChild(div_4);
div_3.appendChild(h5_1);
div_3.appendChild(button_1);
ul_1.appendChild(li_1);
ul_1.appendChild(li_2);
div_4.appendChild(ul_1);
div_4.appendChild(div_5);
div_5.appendChild(button_2);
customOverlay.setContent(div_1);
//마커 클릭으로 커스텀오버레이 on/ off 하는부분
kakao.maps.event.addListener(marker, 'click', function(){
var countClass = $(".popup_wrap").length;
if(countClass > 0){
customOverlay.setMap(null);
}else if(countClass == 0){
customOverlay.setMap(map);
}
});
}
커스텀오버레이는 대충코드가 이런식으로 짰습니다.