enfto
2월 24, 2020, 5:55오전
#1
` for(var i = 0; i < data.length; i++){
var LAT = data[i][“GPS_LAT”]
var LONG = data[i][“GPS_LONG”]
var content = document.createElement('div');
content.className = 'marker';
var content_num = document.createElement('div');
content_num.className = 'number';
content_num.innerHTML = data.length-i;
content.appendChild(content_num);
positions.push({content: content, latlng: new kakao.maps.LatLng(LAT, LONG)}) //마커가될 커스텀 오버레이 배열
$(content).mouseover(function(){
console.log(i);
});
}`
다음과 같이 content를 만들어서 마커처럼 커스텀 오버레이를 띄우는데요, 오버레이에 이벤트를 등록하고싶은데 오버레이마다 다른 alert내용을 띄워주고싶은데 코드대로면 콘솔에 처음 그려지는 마커는 0, 1 이런식으로 콘솔이 그려져야하는데 5개의 마커가 있다면 모든 마커에서 5만 뜨는데 이유를 잘 모르겠습니다 ㅠㅠ
for( ; ; ) 문은 es6를 사용하지 않는 이상 변수가 스코프를 유지하지 못하므로
for문에서 ES6 문법인 let을 사용하시거나,
for문 말고 Array.forEach 또는 IIFE를 사용하여 스코프를 강제시켜서 사용해주세요.
var positions = [
{
title: '카카오',
latlng: new kakao.maps.LatLng(33.450705, 126.570677)
},
{
title: '생태연못',
latlng: new kakao.maps.LatLng(33.450936, 126.569477)
},
{
title: '텃밭',
latlng: new kakao.maps.LatLng(33.450879, 126.569940)
},
{
title: '근린공원',
latlng: new kakao.maps.LatLng(33.451393, 126.570738)
}];
positions.forEach(function(position, idx) {
var latlng = position.latlng;
var content = document.createElement('div');
content.className = 'marker';
var content_num = document.createElement('div');
content_num.className = 'number';
content_num.innerHTML = idx;
content.appendChild(content_num);
var overlay = new daum.maps.CustomOverlay({
content: content,
map: map,
position: latlng
});
content.addEventListener('mouseover', function () {
console.log(idx);
});
});
/*for(let i = 0; i < positions.length; i++){
var latlng = positions[i].latlng;
var content = document.createElement('div');
content.className = 'marker';
var content_num = document.createElement('div');
content_num.className = 'number';
content_num.innerHTML = i;
content.appendChild(content_num);
var overlay = new daum.maps.CustomOverlay({
content: content,
map: map,
position: latlng
});
content.addEventListener('click', function () {
console.log(i);
});*/