안녕하세요 공공데이터 포털에서 데이터를 가지고 와서 지도에 뿌려보았는데 마커로 뿌렸더니 너무 많아서 클러스터 적용하려고 하고 있습니다 그런데 아래 코드로 해봤는데 오류도 나오지 않고 지도에 클러스터로 나오지도 않아서 문의 드립니다.
위 이미지처럼 지도만 나오고 다른거는 안나옵니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>주소로 장소 표시하기</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=서비스키&libraries=services,clusterer"></script>
</head>
<body>
<p style="margin-top:-12px">
<em class="link">
</em>
</p>
<div id="map" style="width:400px;height:520px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표
level: 13 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 12 // 클러스터 할 최소 지도 레벨
});
var data = new Array();
var xhr = new XMLHttpRequest();
//데이터포털에서 데이터 가지고옴
var url = 'http://apis.data.go.kr/1400377/forestPoint/forestPointListSigunguSearch'; /*URL*/
var queryParams = '?' + encodeURIComponent('serviceKey') + '='+'서비스키'; /*Service Key*/
queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /**/
queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10'); /**/
queryParams += '&' + encodeURIComponent('_type') + '=' + encodeURIComponent('xml'); /**/
queryParams += '&' + encodeURIComponent('localAreas') + '=' + encodeURIComponent('11110'); /**/
queryParams += '&' + encodeURIComponent('upplocalcd') + '=' + encodeURIComponent('11,28'); /**/
queryParams += '&' + encodeURIComponent('excludeForecast') + '=' + encodeURIComponent('1'); /**/
xhr.open('GET', url + queryParams);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var responseXml = this.responseXML;
var items = responseXml.getElementsByTagName("item");
// console.log(responseXml);
if(items.length > 0 ){// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
var totalCount = items.length;
var count = 0;
for (var i = 0; i < items.length; i++) {
var item = items[i];
var analdate = item.getElementsByTagName("analdate")[0];
if (typeof analdate === 'undefined') {
analdate = '';
} else {
analdate = analdate.textContent;
}
var doname = item.getElementsByTagName("doname")[0].textContent;
var sigun = item.getElementsByTagName("sigun")[0].textContent;
var meanavg = item.getElementsByTagName("meanavg")[0].textContent;
// 주소로 좌표를 검색합니다
geocoder.addressSearch(doname + " " + sigun, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
data.push({
position: new kakao.maps.LatLng(result[0].x, result[0].y)
});
count++;
if (count === totalCount) {
console.log(data);
var markers = data.map(function(i, position) {
return new kakao.maps.Marker({
position : new kakao.maps.LatLng(position.lat, position.lng)
});
});
//console.log(markers);
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
}
}
});
}
}
// console.log(data); // 데이터를 콘솔에 출력하거나 다른 변수에 할당할 수 있음
}
};
xhr.send('');
</script>
</body>
</html>