inflearn logo
강의

Course
Instructor

Creating a Map Service with the Corona Map Developer 1

Creating an infowindow and adding a click event

이벤트리스너 추가부분 질문..

298

abcdrsef54268

1 asked

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>
도움을 받을 수 있을까요..

vscode nodejs 웹앱 express

Answer 2

0

donghunee

질문 주셔서 감사합니다:)

해당 코드로 시험해본 결과 어디서 오류가 나는지 확인하기 위해서는 

화면과 개발자 콘솔 화면을 캡쳐해서 보내주시면 더 빠르게 해결이 가능할 것 같습니다~!!

다소 번거롭더라도 빠르게 해결 해보도록 하겠습니다.

 

감사합니다~!!

0

abcdrsef54268 

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

이부분에서 변수를 상수 2로 바꿔보긴했는데 이전에 변수로 선언했을 때도 결과는 같았습니다

map API

0

36

1

nodejs 터미널 인식

0

38

1

kakao is not defined 오류

0

415

1

nodemon ./bin/www 입력 시 오류

0

166

1

호스팅 및 도메인 관련

0

160

1

마커이미지가 깨집니다

0

145

2

nodemon설치와 express-generator 오류

0

222

1

코드를 다운받을수 있나요?

0

204

1

SUDO를 계속 입력하지 않는 방법을 알 수 있을까요?

0

601

1

var로 선언하는 이유

0

368

1

Places 코드가 안돼요.

0

351

0

애니메이션 관련 질문

0

271

1

(index):121 Uncaught ReferenceError: kakao is not defined at (index):121:10

0

617

0

히트맵 구성

0

244

0

for문 돌릴때 ii 에 대해서 궁금합니다.

1

389

1

express 설정

0

253

0

이름공간 문법?

0

271

0

마커가 안뜹니다

1

318

2

nodemon 설치 에러

0

413

1

AI NAVER API 관련 질문

1

373

2

궁금한게 있어요 link로 연결할때 href에 public 경로를 빼야만 적용되는 이유는 뭔가요??

1

225

0

node와 ncm 의 버전 확인이 안됩니다ㅠㅠ

0

423

1

저장후엔 localhost가 열리지 않네요ㅠ

0

299

0

설치가 안됩니다

0

200

1