마커 클러스터러 사용하기 예제

마커 클러스터러 사용하기 예제를 진행중인데 api키 등록하고 , 사이트 도메인도 등록했는데 왜 안되는걸까요? ㅠㅠ

사용한 데이터를 보시려면 여기를 클릭하세요!

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=KEY&libraries=clusterer"></script>
<script>
    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 // 클러스터 할 최소 지도 레벨 
    });
 
    // 데이터를 가져오기 위해 jQuery를 사용합니다
    // 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
    $.get("/download/web/data/chicken.json", function(data) {
        // 데이터에서 좌표 값을 가지고 마커를 표시합니다
        // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
        var markers = $(data.positions).map(function(i, position) {
            return new kakao.maps.Marker({
                position : new kakao.maps.LatLng(position.lat, position.lng)
            });
        });

        // 클러스터러에 마커들을 추가합니다
        clusterer.addMarkers(markers);
    });
</script>
</body>
  1. 해당 예제는 jQuery 라이브러리를 사용했습니다. 라이브러리를 먼저 로딩해야 합니다.
  2. json의 경우는 cross domain issue 때문에 로컬에서 실행하면 리소스 요청이 블락당할 겁니다.
    json 내용은 로컬 파일 혹은 직접 스크립트에 객체로 만들어서 사용하세요.
  1. 답변을 주신부분에서 라이브러리부분은 <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=KEY&libraries=clusterer"></script> 이부분인가요?

아니요.

$.get(/* blah */); <= 이 함수가
또 다른 3rd party library인 jQuery 내장 함수 입니다.
jQuery 스트립트를 따로 import 해주세요.

1개의 좋아요

아하 이해했습니다 감사합니다~~

1개의 좋아요