클러스트러 사용하기

지도/로컬 API
#1

var map = new daum.maps.Map(document.getElementById(‘map’), { // 지도를 표시할 div
center : new daum.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표
level : 14 // 지도의 확대 레벨
});

// 마커 클러스터러를 생성합니다 
var clusterer = new daum.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 daum.maps.Marker({
            position : new daum.maps.LatLng(position.lat, position.lng)
        });
    });

    // 클러스터러에 마커들을 추가합니다
    clusterer.addMarkers(markers);
});

여기서 $(.) 여기에 파일 경로를 주잖아요! 그때 json파일에 내용 뭐넣으야하나요??? 경로 지전은 어떻게하구요…ㅜㅜㅜ json파일에 설명에되어있던 데이터를넣엇는데 lat lng 에 주황색 밑줄도뜨구…ㅠㅠㅠㅠㅠㅠ

#2

로컬에 서버를 하나 띄우시고
그 서버 루트 혹은 원하는 위치에 다운받은 json 파일을 위치시킨 후,
$.get() 함수의 첫 번째 argument로 [로컬 서버의 도메인 + json 위치의 path]를 넣어 실행해 주시길 기대하고 만든 예제입니다.
직접 다운받은 파일 경로로 접근하는 것은 동작하지 않을 겁니다.

#3

json데이터는 어떻게 다운받나요…? 예제에있는 json파일내용을 그냥 썻는뎅…ㅜ

#4

아… 그냥 해보실거면 JSON 파일 내용 긁어서
하나의 변수에 할당하시고

var data = {/* 여기에 JSON파일 내용 */};
var markers = data.positions.map(function(i, position) {
    return new daum.maps.Marker({
        position : new daum.maps.LatLng(position.lat, position.lng)
    });
});

clusterer.addMarkers(markers);

위 처럼만 실행해도 될거에요

#5

도메인없으면 그냥 두번째방법으루하면되나요!

#6

네 굳이 jQuery의 Ajax를 쓰지 않아도 됩니다. :slight_smile:

#7

감사합다아~~~

1개의 좋아요
#8

var clusterer = new daum.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
여기서 자꾸만 에러가나는데…어쩌죠…

#9

clusterer 라이브러리 로딩을 아마도 안하신거 같은데요.
라이브러리 로딩을 따로 하셔야 합니다.

이 문서를 보고 따라하시면 쉽게 할 수 있을 거에요

#10

음… alert를띄워서했는데…다실해은되는데 클러스터러 가안되요…ㅜㅜ 답변을 너무 많이하네요ㅜㅜㅜㅜ

#11

코드를 첨부해주세요
쪽지로 보내주셔도 되고요 ㅎㅎ

#12

ㅎ…해결했어요!! data로하는거말구…라이브러리 다운받구 $get함수로하니
까되더라구요! 감사합니당

1개의 좋아요