let query = window.location.search;
let param = new URLSearchParams(query);
let Name = param.get('Name');
var map = new kakao.maps.Map(document.getElementById('map'), {// 지도를 표시할 div
center: new kakao.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표
level: 12 // 지도의 확대 레벨
});
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
// 지도 타입 변경 컨트롤을 생성한다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도의 상단 우측에 지도 타입 변경 컨트롤을 추가한다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
$.ajax({
type: 'GET',
url : 'http://harudream.com:4906/MAP?Name=' + Name,
success : function(Result){
Data = JSON.parse(Result)
$.get("./12345.json", function (data) {
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
var markers = $(data.positions).map(function (i, position) {
var maks = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(position.y, position.x)
});
for(i=0; i < Object.keys(Data['contentid']).length; i=i+1){
var infowindow = new kakao.maps.InfoWindow({
removable : true,
content : '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' <a href = "https://map.kakao.com/?q='+Data['관광지명'][i]+'"><span>'+Data['관광지명'][i]+'</span></a>' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src='+Data['이미지1'][i]+' width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="normal">'+Data['주소'][i]+'</div>' +
' <div class="jibun ellipsis">'+Data['중분류'][i]+' </div>' +
' <div class="jibun ellipsis"><a href="listing-detail-sidebar.html?Name='+Data['관광지명'][i]+'"></a>\</div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>'
});
};
});
//좌표 추가
kakao.maps.event.addListener(maks, 'click', makeOverListener(map, maks, infowindow));
return maks;
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
});
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
infowindow.close();
return function () {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function () {
infowindow.close();
};
}
},
error : function(xhr, ajaxOptions, thrownError){
alert("Error..")}
})
현재 코드입니다… 좌표만 찍히고 클러스터러는 작동을 하지 않습니다… 원인을 모르겠습니다 조언 부탁드립니다