저만 안되는건가여? ㅠㅜ.. 클러스터가 안됩니다

http://apis.map.kakao.com/web/sample/basicClusterer/
위의 링크대로 했습니다.

json 도 다운받아서 로컬에서도 해봤는데, 인식을 못하고 데이터를 가지고 오지 않습니다.

하도 답답해서 아래와 같이 kakao.com 의 json 링크로 걸었는데도 안되네여…
$.get("http://apis.map.kakao.com/download/web/data/chicken.json, ~~

jquery 문제인가 해서 아래와 같이 링크로 해봤습니다.

api 에 있는 내용 그래도 입니다. appkey 는 보안상 좀 지웠습니다.

지도만 나타나고, marker 나 cluster는 하나도 나타나지 않네요.
아무리 봐도 안되는 이유를 모르겠습니다.

제가 무엇을 잘못한 것인지 알수 있을까요?? ㅠㅜ.
도움을 요청드립니다.

마커 클러스터러 사용하기

사용하시는 페이지의 도메인 또는 IP 가 앱정보에 허용 도메인으로 등록돼 있는 지 확인해보세요.

지도가 나타나는데 마커 클러스터러가 안나오는 거라면
스크립트에 라이브러리를 추가했는지 확인 부탁드립니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=clusterer"></script>

답변 감사합니다.
api 카를 이용해서 지도는 나옵니다.
그리고 marker 예제도 해봤는데 잘됩니다.
여러개의 마커도 잘나오구요…

이 클러스터러만 안되네요.
달랑 지도만 보여지고, 예제와 같이 클러스터 표시가 되지 않네요.

파일첨부가 있다면 제가한거 보내드리고 확인을 받고 싶은 심정입니다.

이상하게 왜 클러스터만 안되는지 모르겠네요.

위와 같이 스크립트에 클러스터러 라이브러리를 추가하셨나요?

1개의 좋아요

문의 주신 계정 내 등록된 앱키를 사용하시는 게 아닌가요?
Domain mismatch 에러가 나온 로그가 있어 말씀드렸었는데
지도는 보여진다고 하셨었네요.
지도 API 를 호출한 다른 이력은 보이지 않는데…

@lea.ju 가 알려주신대로 라이브러리를 확인해보시고
그래도 안되면 사용하신 앱키와 페이지 주소를 메시지로 알려주세요.

보내주신 키를 확인해보니 domain mismatch 가 발생한게 맞습니다.
로컬에서 사용하실 때에도 웹서버를 구동하시고 로컬호스트 도메인을 허용등록 해주셔야 해요.
http://apis.map.kakao.com/web/guide/

그런데 이처럼 domain mismatch 가 발생할 경우에는 지도도 표시가 안돼야 하는데요
로컬에서 테스트하실 때 지도는 나오고 클러스터만 안나온게 맞나요?

네. 지도는 잘나옵니다.

보내드린 url 클릭해보시면 아시겠지만 거기서는 정상적으로 보여집니다.

저는 도메인이 아니라 e:\test\test2.html 이렇게 되어있는 형식으로 사용하고자 하는게 제 목적입니다.

제가 어제 처음 해봐서 아직 무엇무엇을 세팅해야하는지 잘 알지 못합니다.

알려주시면 수정해놓겠습니다.

감사합니다.

콘솔에서 보시면 혹시… CORS 에러가 발생한 거 아닌가요?

코드 전문을 알려주세요.
혹은 파일을 보내주세요. 파일 첨부 됩니다.

저도 똑같이 지도만 보여지고 클러스터리가 안나옵니다.
혹시 jquery를 다운받고 소스를 입력시켜줘야하나요?
라이브러리 key입력하고 그 다음에 타이핑 했습니다.
사이트 도메인은 비주얼코드를 사용하기 때문에 http://127.0.0.1:5000 이걸로 등록했습니다.
정말 답답합니당ㅜㅜ

저도 똑같이 지도만 보여지고 클러스터리가 안나옵니다.
혹시 jquery를 다운받고 소스를 입력시켜줘야하나요?
라이브러리 key입력하고 그 다음에 타이핑 했습니다.
사이트 도메인은 비주얼코드를 사용하기 때문에 http://127.0.0.1:5000 이걸로 등록했습니다.

해결하셨을까요?
저도 im님처럼 같은 현상인데 해결하셨으면 알려주실수 있으실까요?

안녕하세요 저도 똑같은 현상을 겪고있는데 제 소스한번봐주실수 있으실까요?
소스는 라이브러리 쓰고 다를게없는데 지도만뜨고 클러스터리가 안뜹니다…

마커 클러스터러 사용하기

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

ajax 요청을 위해 샘플에서는 jquery를 사용했기 때문에
동일한 코드를 사용하시려면 jquery임포트하셔야 합니다.
아니면 다른 방식(XHR, fetch)를 사용하셔야 할겁니다.
사실 위는 부차적인 문제이고 진짜 문제는
chicken.json을 호출해야 하는 도메인이
사용자분의 도메인과 다르기 때문에 데이터를 못 가져오실 겁니다. (CORS 정책 위배)

따라서 이 부분은 json 내용을 그대로 복사하여 로컬 파일로 만들고
자기 자신의 서버로 ajax요청하여 그 파일 내용을 가져오시도록 만드시거나
아예 ajax요청을 하지 않고
js의 객체로 직접 넣어서 사용하는 방식으로 시도해 주세요.

와 정말 친절한답변 감사합니다.
계속 혼자 해보는데 안되서 답답해죽을려고 했습니다.
그런데 혹시 json내용을 복사해서 메모장에 붙여넣으라는말씀이신가요?
로컬파일이라는게 네이버에 검색을 해봤는데 정확히 잘모르겠습니다.
그리고 js의 객체를 직접 넣으시라고 하셨는데 다른이름으로 저장해서 같은 파일안에 넣는걸까요?

chicken.json.zip (3.0 KB)

로컬 서버를 띄우셨으면
해당 파일을 서버의 root나 혹은 원하는 디렉토리에 위치시킨 후
요청을 통해 가져오면 되고요.

다 귀찮다 하면 위 파일 내용을 js의 객체로 만들어서 사용하는 겁니다.

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 // 클러스터 할 최소 지도 레벨 
});

var data = {
  "positions": [
    {
      "lat": 37.27943075229118,
      "lng": 127.01763998406159
    },
    {
      "lat": 37.55915668706214,
      "lng": 126.92536526611102
    },
    {
      "lat": 35.13854258261161,
      "lng": 129.1014781294671
    },
    {
      "lat": 37.55518388656961,
      "lng": 126.92926237742505
    },
    /* ...... */
};

var markers = data.positions.map(function(position) {
    return new kakao.maps.Marker({
        position : new kakao.maps.LatLng(position.lat, position.lng)
    });
});

// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
1개의 좋아요

와 감사합니다!!
선생님 말씀대로 우선 chicken.json.zip파일을 다운을 받고 이걸 압축풀어서
제가 원하는 곳에 나두거나
선생님 밑에 소스처럼 js를 객체로 만들어서 사용하면된다는것인데
만약 경로를 파일탐색기 통해서 그대로 복붙해도 될까요?
또 저는 웹 사이트 도메인을 http://127.0.0.1:5000/corona.html 해야하나요
아니면 http://127.0.0.1:5000 이렇게만 해도될까요?

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 // 클러스터 할 최소 지도 레벨
});

var data = {
“positions”: [
{
“lat”: 37.27943075229118,
“lng”: 127.01763998406159
},
{
“lat”: 37.55915668706214,
“lng”: 126.92536526611102
},
{
“lat”: 35.13854258261161,
“lng”: 129.1014781294671
},
{
“lat”: 37.55518388656961,
“lng”: 126.92926237742505
},
/* … */
};

var markers = data.positions.map(function(position) {
return new kakao.maps.Marker({
position : new kakao.maps.LatLng(position.lat, position.lng)
});
});

코드는 이렇게 하면될까요?
이제 웹 도메인 등록만 잘되면 클러스터리가 잘뜨는것이죠?
제가 아직 초보지만 코로나맵을 만들고싶습니다.
그런데 선생님이 되게 답답해하실거같아서 너무 죄송하네요…

json은 서버의 root(base dir) 혹은 서버 root 이하의 원하는 경로에 넣어서 사용하세요.
root에 넣었다고 한다면
http://127.0.0.1:5000/chicken.json 으로 ajax 요청하시면 됩니다.
디벨로퍼 사이트 웹 콘솔에 도메인 등록은 http://127.0.0.1:5000 까지만 하시면 되고요

원 질문글은 다른분의 것이므로
추가 질문이 있으시다면 새로운 글타래를 만들어 진행해 주시길 바랍니다.

1개의 좋아요