카테고리

질문 & 답변
세부 분야

풀스택
해결 여부

미해결

클릭이벤트가 왜 추가되지 않는지 모르겠습니다.

21.02.17 23:32 작성 조회수 114

개발자님, 계속 코드를 다시 봐도 오류를 찾을 수 가 없어서 질문을 올립니다.

index.ejs파일에 코드 오류가 없는거 같은데 왜 이벤트 생성이 제대로 안될까요??

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>myfirstmap</title>
<link rel="stylesheet" href="/stylesheets/style.css"/>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=wex4n8j00f">
</script>
</head>

<body>
<div id="navbar">myfirstmap</div>
<div id="infoBox">
<div id="infoTitle">현재날짜</div>
<div id="infoContent">2020.07.10</div>
</div>
<div id="map" style="width:100%; height:100vh;"></div>
<script type="text/javascript" src="/data/data.js"></script>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10,
};

var map = new naver.maps.Map('map', mapOptions);

var markerList=[];
var infowindowList=[];

for (var i in data){
var target=data[i];
var latlng=new naver.maps.LatLng(target.lat, target.lng);
marker=new naver.maps.Marker({
map:map,
position:latlng,
icon:{
content:"<div class='marker'></div>",
anchor: new naver.maps.Point(12,12)
},
});

var content=`<div class='infowindow_wrap'>
 <div class='infowindow_title'>${target.title}</div>
 <div class='infowindow_content'>${target.content}</div>
 <div class='infowindow_date'>${target.date}</div>
 </div>`

var infowindow=new naver.maps.InfoWindow({
cotent: content,
backgroundColor:"#00ff0000",
borderColor: "#00ff0000",
anchorSize: new naver.maps.Size(0,0)
})

markerList.push(marker);
infowindowList.push(infowindow);
}

for(var i=0,ii=markerList.length; i<ii; i++){
naver.maps.Event.addListener(markerList[i],"click",getClickHandler(i));
}

function getClickHandler(i){
return function(){
var marker=markerList[i];
var infowindow=infowindowList[i];
if(infowindow.getMap()){
infowindow.close();
}else{
infowindow.open(map,marker)
}
}
}

</script>
</body>
</html>