Cluster().then(response => {
console.log('멥??'+response.data);
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
let markers = (response.data).map(function (i, position) {
var maks = new kakao.maps.Marker({
position: new kakao.maps.LatLng(position.latitude, position.longitude),
})
var overlay = new kakao.maps.CustomOverlay({
map: null,
position: new kakao.maps.LatLng(position.latitude, position.longitude),
content: '<div class="custom-overlay">' +
' <div class="custom-overlay-wrap">' +
' <div class="custom-overlay-img">' +
' <a href="/boardDetail/' + position.id + '">' +
' <img src="' + position.imgFullPath + '" class="custom-overlay-img1" ></a>' +
' </div>' +
'<div class="custom-overlay-profile">' +
' <div class="profile_img">\n' +
' <img src="' + position.userEntity.profileimgFullPath + '" class="profile-img">\n' +
'</div>' +
' <div class="custom-namediv"><div class="location"><a class="custom-name" href="/profile/' + position.userEntity.id + '">' + position.userEntity.name +
'</a>' +
'</div>' +
'<div class="custom-location">\n' +
'\n' +
'</div>\n' +
'</div>' +
'</div>' +
'<div class="custom-overlay-content">' +
' <div class="name"><div class="custom-overlay-location">' + position.title +
'</div>' +
'</div>' +
'</div>' +
'<div class="custom-overlay-lower">' +
'좋아요' + position.like + ' 댓글' + position.count +
'</div>' +
'</div>' +
'</div>' +
'</div>'
})
kakao.maps.event.addListener(maks, 'click', function () {
if (!overlay.getMap()) { //null 인경우 - 지도에 없으니
overlay.setMap(map); //지도에 올린다.
} else {
overlay.setMap(null);
}
});
return maks;
});
clusterer.addMarkers(markers);
})
맨처음에 Cluseter() 이부분은 axios부분이라 데이터를 가져오는것 입니다.
html에서는 잘 동작하던 코드인데 vue에서의 해결법을 모르겠네요…
고수분들 도와주세요
console.log 부분에서 [Object object]라는 코드가 나옵니다.