지금 현재 json에 있는 좌표가 카카오맵 좌표를 다른 종류여서요
주소로 받은 다음 카카오좌표로 변환시켜 마커까지는 찍혔는데
클러스터러 적용이 안됩니다.
아래는 jQuery 이용한 코드입니다.
$(function kakaomap() {
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.5693255, 126.9860066), // 지도의 중심좌표
level: 10 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
//마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 6 // 클러스터 할 최소 지도 레벨
});
$.ajax({
url:store.json",
type : “GET” ,
dataType:“json”,
success:function(data){
// 가게 리스트 데이터입니다.
let store = data.DATA
$.each(hospital , function(i , m) {
//가게 영업중 정상 일 때만
if(store[i].dtlstatenm == "정상"){
// 가게 주소가 있을 때만
if(store[i].sitewhladdr != ""){
let name = store[i].bplcnm;
let addr = store[i].sitewhladdr;
let tel = store[i].sitetel;
let state = hospital[i].dtlstatenm;
let x =store[i].x;
let y = store[i].y;
// 주소로 좌표를 검색합니다
geocoder.addressSearch("'"+addr+"'", function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div class="wrap">' +
' <div class="title">' +
name +
</div>' +
'</div>'
});
kakao.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
$(document).on("click",".closeInfo",function(event){
infowindow.close(map, marker);
})
}
});
}
}
});
}
});
clusterer.addMarkers(marker);
});