지도에서 여러 개의 마커 생성하기

var data = []

[] 안에서 위치정보, 콘텐츠 같은 정보들을 저장한다.

{

title : "seoul"

content : "서울 남산타워"

date : "2020-03-15"

lat : 위도

lng : 경도

}

<script type="text/javascript" src="/data/data.js"></script> 

외부에 있던 데이터, data 폴더 안에 data.js를 여기 index.ejs안에서 활용을 해보겠다 라고 명시한 것이다.

data라는 변수를 스크립트 안에서 사용할 수 있게 된다.

 

data가 배열형태이기 때문에 for문을 통해서 하나씩 읽어본다.

for(var i in data) {

 var target = data[i]; //title, content, date, lat와 lng라는 정보가 저장된다.

 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>,

},

});