저도 똑같이 지도만 보여지고 클러스터리가 안나옵니다.
혹시 jquery를 다운받고 소스를 입력시켜줘야하나요?
라이브러리 key입력하고 그 다음에 타이핑 했습니다.
사이트 도메인은 비주얼코드를 사용하기 때문에 http://127.0.0.1:5000 이걸로 등록했습니다.
정말 답답합니당ㅜㅜ
ajax 요청을 위해 샘플에서는 jquery를 사용했기 때문에
동일한 코드를 사용하시려면 jquery임포트하셔야 합니다.
아니면 다른 방식(XHR, fetch)를 사용하셔야 할겁니다.
사실 위는 부차적인 문제이고 진짜 문제는
chicken.json을 호출해야 하는 도메인이
사용자분의 도메인과 다르기 때문에 데이터를 못 가져오실 겁니다. (CORS 정책 위배)
따라서 이 부분은 json 내용을 그대로 복사하여 로컬 파일로 만들고
자기 자신의 서버로 ajax요청하여 그 파일 내용을 가져오시도록 만드시거나
아예 ajax요청을 하지 않고
js의 객체로 직접 넣어서 사용하는 방식으로 시도해 주세요.
와 정말 친절한답변 감사합니다.
계속 혼자 해보는데 안되서 답답해죽을려고 했습니다.
그런데 혹시 json내용을 복사해서 메모장에 붙여넣으라는말씀이신가요?
로컬파일이라는게 네이버에 검색을 해봤는데 정확히 잘모르겠습니다.
그리고 js의 객체를 직접 넣으시라고 하셨는데 다른이름으로 저장해서 같은 파일안에 넣는걸까요?
로컬 서버를 띄우셨으면
해당 파일을 서버의 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);
와 감사합니다!!
선생님 말씀대로 우선 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 markers = data.positions.map(function(position) {
return new kakao.maps.Marker({
position : new kakao.maps.LatLng(position.lat, position.lng)
});
});
코드는 이렇게 하면될까요?
이제 웹 도메인 등록만 잘되면 클러스터리가 잘뜨는것이죠?
제가 아직 초보지만 코로나맵을 만들고싶습니다.
그런데 선생님이 되게 답답해하실거같아서 너무 죄송하네요…