Django REST API Framework에서 등록한 정보들을 axios를 통해 장소에 대한 정보를 불러와 받은 응답을 바탕으로
해당 문서를 참고하여 코드를 작성하였습니다.
그러나, for문 내부에 클로저 처리를 해주어 별도로 infowindow를 open, close 하는 함수를 선언하였음에도 불구하고 일회성 처럼 마커에 마우스를 갖다댄 이후에 다시 갖다댈 경우 이후에는 infowindow가 열리지도 닫히지도 않는 상황이 발생하였습니다. addListener에 대한 반응은 계속 들어오나 for문 이후로 marker, infowindow 정보가 유실되어 실행되지 않는 것으로 추정되는데 어떻게 데이터를 처리해주어야 하는지 조언을 구하고자 글 올려봅니다. (__)
Vue.js 내부 method 코드 공유합니다.
loadMap() {
const container = document.getElementById('map');
const options = {
center: new kakao.maps.LatLng(37.49533610932167, 127.05665437437267),
level: 5
};
this.map = new kakao.maps.Map(container, options)
this.geocoder = new kakao.maps.services.Geocoder();
axios.get("http://localhost:8000/place/")
.then((response) => {
for (let i = 0; i < response.data.length; i++) {
let position = new kakao.maps.LatLng(response.data[i].lat, response.data[i].lng);
let marker = new kakao.maps.Marker({
map: this.map,
position: position
});
let content = '<p style="padding: 5px;">'+ response.data[i].name +' / '+ response.data[i].description+'</p>'; // p 태그로 감싼 부분인데 글 올릴 때 잘리네요 감안해주세요.
let infoWindow = new kakao.maps.InfoWindow({
content : content,
});
kakao.maps.event.addListener(marker, 'mouseover', this.makeOverListener(this.map, marker, infoWindow));
kakao.maps.event.addListener(marker, 'mouseout', this.makeOutListener(infoWindow));
}
})
.catch((err) => {
alert("장소 정보들을 불러오는데 실패했습니다.")
console.log(err)
})
},
makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
},
makeOutListener(infowindow) {
return function () {
infowindow.close();
};
}