지도/로컬 API에 대한 문의게시판입니다.
지도/로컬 API에 대한 문의게시판입니다.
커스텀 오버레이를 여러개 생성하는 과정에서 문제가 쫌 있습니다.
for(let i=0; i < positions.length; i++){
var data = positions[i];
displayMarker(data);
}
// 지도에 마커를 표시하는 함수입니다
function displayMarker(data) {
var marker = new kakao.maps.Marker({
map: map,
position: data.latlng
});
var overlay = new kakao.maps.CustomOverlay({
xAnchor: 0,
position: marker.getPosition()
});
var content = document.createElement('div');
content.innerHTML = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
data.title +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
" </div>" +
' <div class="body">' +
' <div class="desc">' +
' <div class="ellipsis">' +
" 제주특별자치도 제주시 첨단로 242" +
" </div>" +
' <div class="jibun ellipsis">영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
" </div>" +
" </div>" +
" </div>" +
"</div>";
var closeBtn = document.createElement('button');
closeBtn.innerHTML = 'x';
closeBtn.onclick = function () {
overlay.setMap(null);
};
content.appendChild(closeBtn);
overlay.setContent(content);
kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
}
닫기 버튼이 너무 동떨어진 곳에 저렇게 나오는데 혹시 이는 어떻게 수정할 수 없는건가요??
또 content에 pointer 기능을 가진 x 표시가 있고 그 X를 누르면 setmap(null)함수로 이동이 됐는데 오버레이를 여러개 만드니까 작동이 안됩니다. 왜 그런걸까요 ㅠㅠ