클러스터 마커 생성 문의

카카오맵 API (지도/로컬)
1

일반 마커생성은 정상적으로 되는것으로 확인해서

마커 클러스터러에 클릭이벤트 추가하기를 구현하고싶었는데

에러는 안뜨지만 지도상에 마커가 찍히지 않는데 잘못된 부분이 있을까요
/////////////////////////지도생성//////////////////////////////////////

         var map = new kakao.maps.Map(document.getElementById('map'), { // 지도를 표시할 div

                center : new kakao.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표

                level : 14 // 지도의 확대 레벨

            });

        var clusterer = new kakao.maps.MarkerClusterer({

            map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체

            averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정

            minLevel: 10, // 클러스터 할 최소 지도 레벨

            disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다

        });

        var geocoder = new kakao.maps.services.Geocoder();

        let markers = await Promise.all(this.boards.map(async el => {

            let address = el.sido + el.gugun + el.detailAddress;

            try {

                geocoder.addressSearch(address, function(result, status) {

                    if (status === kakao.maps.services.Status.OK) {

                        let coords = new kakao.maps.LatLng(result[0].y, result[0].x);

                        return new kakao.maps.Marker({

                            position : coords

                        });

                    }else{

                        console.log(status);

                    }

                });

            } catch (error) {

                console.log(error);

            }

        }));

        clusterer.addMarkers(markers.filter(marker => marker !== null));

        kakao.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {

            // 현재 지도 레벨에서 1레벨 확대한 레벨

            var level = map.getLevel()-1;

            // 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다

            map.setLevel(level, {anchor: cluster.getCenter()});

        });

좌표는 모두 찍히는것으로 확인됐습니다

2

makers를 콘솔에 출력해보면 undefined값이 들어간 배열이 담겨있는 걸 확인할 수 있습니다.
markers배열에 생성한 마커 객체가 추가될 수 있게
geocoder.addressSearch를 Promise로 감싸고 마커를 resolve해서 배열에 추가해서 확인해주세요.
https://devtalk.kakao.com/t/topic/115312/2?u=lea.ju

3

넵 !
const markers = [];

await Promise.all(this.boards.map(async el => {
const address = el.sido + el.gugun + el.detailAddress;
try {
const result = await new Promise((resolve, reject) => {
geocoder.addressSearch(address, (result, status) => {
if (status === kakao.maps.services.Status.OK) {
resolve(result[0]);
} else {
reject(status);
}
});
});
const coords = new kakao.maps.LatLng(result.y, result.x);
const marker = new kakao.maps.Marker({ position: coords });
markers.push(marker);
} catch (error) {
console.log(error);
}
}));

console.log(markers);
수정해서 해결했습니다! 감사합니다 ~

1개의 좋아요