kakao api로 여기저기 찾아보며 짜집기 해서 겨우 오버레이 띄우는거 까진 성공했는데
mouseover, mouseout, click 기능을 넣어 over와 out은 평상시 작동하고 click하였을시 mouseout기능이 작동을 중지하고
닫기 기능을 사용하여 닫았을때 다시 기능이 작동하도록 만들고 싶은데 몇일동안 고민했는데 잘 안되네요…
일단 예제에 있는 css넣고 글자 넣어서 작동 시켜보고 있습니다… 조언좀 해주세요
그사이 코드 몇개 더 집어넣어서 조금 바뀌었습니다 다시 수정 했습니다
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=f5efbb76984a690f184a2122f9ccc6c0"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
mapOption = {
center: new kakao.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 지도에 마커를 표시합니다
var positions = [
{
content: '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay(0)" title="닫기" id=""></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>',
latlng: new kakao.maps.LatLng(33.450705, 126.570677)
},
{
content: '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay(1)" title="닫기" id=""></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>',
latlng: new kakao.maps.LatLng(33.450936, 126.569477)
},
{
content: '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay(2)" title="닫기" id=""></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>',
latlng: new kakao.maps.LatLng(33.450879, 126.569940)
},
{
content: '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 카카오 스페이스닷원' +
' <div class="close" onclick="closeOverlay(3)" title="닫기" id=""></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>',
latlng: new kakao.maps.LatLng(33.451393, 126.570738)
}
];
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var clickedOverlay = null;
var overlays = [];
for (var i = 0; i < positions.length; i++) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i].latlng // 마커의 위치
});
(function (mark) {
var overlay = new kakao.maps.CustomOverlay({
content: positions[i].content,
map: map,
position: mark.getPosition()
});
overlays.push(overlay);
//마커를 클릭했을 때 커스텀 오버레이를 표시합니다
// kakao.maps.event.addListener(mark, 'mouseover', function () {
// overlay.setMap(map);
// });
// kakao.maps.event.addListener(mark, 'mouseout', function () {
// overlay.setMap(null);
// });
kakao.maps.event.addListener(mark, 'click', function () {
if (clickedOverlay) {
clickedOverlay.setMap(null);
}
overlay.setMap(map);
clickedOverlay = overlay;
});
closeOverlay(i);
})(marker);
}
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay(pos) {
overlays[pos].setMap(null);
}
</script>