-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
이벤트리스너 추가부분 질문..
22.02.19 20:05 작성 조회수 147
0
안녕하세요. 강의 수강하다가 해결못하는 부분이 있어서 질문드립니다. 코드는 똑같은 것 같은데, 인포윈도우를 띄웠을 때, 마커 두개에 두번째 데이터(마지막 데이터)가 표시되는데 원인을 못찾고 있어요.ㅠㅠ
첫번째 for문에서 리스트에 각각 두개가 들어가는 것까진 확인했는데 원인이 뭔지
<!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>BARRIER FREE</title>
<link rel="stylesheet" href="/stylesheets/style.css"/>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=2t3ojlwea9"></script>
</head>
<body>
<div id="navbar">barrier free</div>
<div id="infobox">
<form action="">
<div id="infotitle">filter</div>
<label for="filter"></label><br>
<select name="categories" id="categories">
<option value="all">All</option>
<option value="cosmetics">화장품</option>
</select>
<!-- <input type="submit" value="Submit"> -->
</form>
</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.48124681977143, 126.95270482812877),
zoom: 17
};
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='infowindows_title'> ${target.title}
<div class='infowindows_store'>${target.store}
<div class='infowindows_category'>${target.category}
<div class='infowindows_detail'>${target.detail}
</div> `
var infowindow = new naver.maps.InfoWindow({
content : content,
backgroundColor : "#00ff0000",
borderColor : "#00ff0000",
anchorSize : new naver.maps.Size(0,0)
})
markerList.push(marker);
infowindowList.push(infowindow);
}
for(var i=0; i<2;i++){
naver.maps.Event.addListener(markerList[i],"click",getClickHandler(i));
}
function getClickHandler(i){
return function(){
var marker = markerList[i];
var infowinidow=infowindowList[i];
if(infowindow.getMap()){//infowindow가 표시되어있는지
infowindow.close();
}else{
infowindow.open(map,marker)
}
}
}
</script>
</body>
</html>
답변을 작성해보세요.
0
이동훈
지식공유자2022.02.22
질문 주셔서 감사합니다:)
해당 코드로 시험해본 결과 어디서 오류가 나는지 확인하기 위해서는
화면과 개발자 콘솔 화면을 캡쳐해서 보내주시면 더 빠르게 해결이 가능할 것 같습니다~!!
다소 번거롭더라도 빠르게 해결 해보도록 하겠습니다.
감사합니다~!!
0
닉네임
질문자2022.02.19
for(var i=0; i<2;i++){
naver.maps.Event.addListener(markerList[i],"click",getClickHandler(i));
}
이부분에서 변수를 상수 2로 바꿔보긴했는데 이전에 변수로 선언했을 때도 결과는 같았습니다
답변 2