클러스터 사용하려고 하는데 지도만 나옵니다

안녕하세요 공공데이터 포털에서 데이터를 가지고 와서 지도에 뿌려보았는데 마커로 뿌렸더니 너무 많아서 클러스터 적용하려고 하고 있습니다 그런데 아래 코드로 해봤는데 오류도 나오지 않고 지도에 클러스터로 나오지도 않아서 문의 드립니다.

image
위 이미지처럼 지도만 나오고 다른거는 안나옵니다.

<%@ 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>

@wlwhsakdl

position: new kakao.maps.LatLng(result[0].x, result[0].y)

로 들어가 있는데요
x = 가로축 = 경도 = lng
y = 세로축 = 위도 = lat
입니다.

1개의 좋아요

position: new kakao.maps.LatLng( result[0].y, result[0].x)

로 수정하고 다시 실행했는데도 여전히 나오지 않습니다

코드를 보면 data 배열에 추가되는 좌표 정보는 {lat: 33.xxx, lng: 126.xxx}가 아닌
latlng객체를 생성해서 관리하고 있습니다.

그리고 data반복문에서 i는 data의 i번째 값이고, position이 index 정보로
마커를 생성할 때 잘못된 정보로 값을 넣어서 마커를 생성하고 있는데요.

아래와 같이 수정해서 확인해주세요.

var markers = data.map(function(val, idx) {
    return new kakao.maps.Marker({
        position: val.position, // val은 {position: LatLng 객체}로 position을 가져와서 마커의 좌표로 설정해주세요.
        // position : new kakao.maps.LatLng(position.lat, position.lng)
    });
});
1개의 좋아요

헉…! 감사합니다 해결됐습니다!

1개의 좋아요