다수의 인포창에서 다른인포창 클릭시 기존인포창 자동 닫기 방법좀 ㅠㅠ

지도/로컬 API
#1

안녕하세요 ㅠㅠ

생초보입니다.

다른분들이 만들어놓은 코드 짜집어서 맨땅에 해딩하듯 만드는데 너무 힘이 듭니다. ㅠㅠ

우선 제목 그대로

다수의 인포창에서 다른인포창 클릭시 기존인포창 자동 닫기 방법을 알고 싶어서 검색했는데요.

11112222

이렇게 플립으로 만들고 클릭할때마다 true false 하도록 하면된다는데

어떻게 코드를 짜야할지 감이 안옵니다 ㅠㅠ

기존엔

var mapContainer = document.getElementById(‘map2’), // 지도의 중심좌표
mapOption = {
center: new daum.maps.LatLng(35.1579791033567,129.0582177555142), // 지도의 중심좌표
level: 6 // 지도의 확대 레벨
};

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new daum.maps.MapTypeControl();

// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);

// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

<?php $sql="select * from {$write_table} order by wr_id asc"; $result=sql_query($sql); $cnt=0; for($i=0; $row=sql_fetch_array($result); $i++) { if($row['wr_29'] && $row['wr_30']) { $sql="select count(*) as cnt from {$write_table} where wr_datetime>=DATE_ADD(now(), interval -1 WEEK) and wr_parent='{$row['wr_id']}' and wr_is_comment=1"; $rows=sql_fetch($sql); $com_count=(int)$rows['cnt']; $thumb = get_list_thumbnail($board['bo_table'], $row['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']); if($thumb['src']) { $img_content = ''.$thumb['alt'].''; } else { $img_content = 'no image'; } ?>

// 마커를 생성합니다

var marker = new daum.maps.Marker({
    map: map, // 마커를 표시할 지도
    position: new daum.maps.LatLng(<?=$row['wr_29']?>, <?=$row['wr_30']?>) // 마커의 위치
});
<? if($com_count == 0){ ?> 
marker.setOpacity(0.3)
<? } ?> 
var iwContent = '<?echo $img_content?><br><div style="width:150px;text-align:center;padding:10px 0;"><?=$row['wr_subject']?></div><br>&nbsp;&nbsp;<?=$row['wr_10']?><br>&nbsp;&nbsp;<?=$row['wr_11']?><br>&nbsp;&nbsp;<?=$row['wr_12']?><br>&nbsp;&nbsp;<?=$row['wr_13']?><br>&nbsp;&nbsp;<?=$row['wr_14']?><br><br>&nbsp;&nbsp;<a href="./board.php?bo_table=<?=$GLOBALS['bo_table']?>&wr_id=<?=$row['wr_id']?>" style="color:blue">방보기</a><br><br><br>&nbsp;&nbsp;최근일주일 등록공실 <?=$com_count?>개<br>&nbsp;&nbsp;<div class="gall_info"><span class="sound_only">조회 </span>&nbsp;&nbsp;<strong><i class="fa fa-eye" aria-hidden="true"></i>&nbsp;<?php echo $row['wr_hit'] ?></strong>&nbsp;<span class="sound_only">추천</span><strong><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>&nbsp;<?php echo $row['wr_good'] ?></strong>&nbsp;<span class="sound_only">비추천</span><strong><i class="fa fa-thumbs-o-down" aria-hidden="true"></i>&nbsp;<?php echo $row['wr_nogood'] ?></strong></div><br>',
    iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

var infowindow = new daum.maps.InfoWindow({
    content: iwContent,
    removable : iwRemoveable
});

// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다 
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
//daum.maps.event.addListener(marker, 'click', br_redirect(positions[i].wr_id));
// 마커에 click 이벤트를 등록합니다
daum.maps.event.addListener(marker, 'click', makeOverListener(map, marker, infowindow));
<?php $cnt++; } } ?>

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}

// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}

이렇게 되어 있는데 저거 x자 눌러서 끄는게 너무 안좋아서 다른 마커 클릭시 자동 닫기가 가능한 코드가 필요해요 ㅠㅠ

코드에 대한 기본 지식이 없다보니 너무 힘이 듭니다.

어떻게 하면 될까요 ㅠㅠ

#2



위 답변들과

http://apis.map.daum.net/web/sample/categoryFromBounds/

이 예제를 참고해주세요. 기능 구현에 필요한 코드들은 다 들어 있습니다.

1개의 좋아요