Tech. Forum 개발자들을 위한 정보 공유의 장입니다
닫기

Tech.Forum

Tmap.Cluster.Layer 를 사용중입니다.

#1

distance, gap 등에 따라 Tmap.Cluster.Icon을 이용해 군체(클러스터)의 크기를 표기하여 사용중입니다.

위 내용들이 v2에서는 없어지는 기능인가요?

마커 클러스터러 사용하기
http://tmapapi.sktelecom.com/main.html#web/sample/webSample49

// 클러스터용 아이콘
// 클러스터 된 개수별로 아이콘을 변경 가능
var icons = [];
icons.push(new Tmap.Cluster.Icon(“http://topopentile1.tmap.co.kr/tmapicon/map/clusterbg1.png”, { width: 20, fontColor: “#333333”, fontSize: 15 }));
icons.push(new Tmap.Cluster.Icon(“http://topopentile1.tmap.co.kr/tmapicon/map/clusterbg2.png”, { width: 25, fontColor: “#333333”, fontSize: 15 }));
icons.push(new Tmap.Cluster.Icon(“http://topopentile1.tmap.co.kr/tmapicon/map/clusterbg3.png”, { width: 30, fontColor: “#333333”, fontSize: 15 }));

// 마커클러스터 등록
// gap : 값이 10이면 10개단위로 icon 변경
// distance : 클러스터링 할 픽셀 거리
var markerCluster = new Tmap.Cluster.Layer(map, { markers: markers, icon: icons, gap: 30, distance: 70 });

위에 해당하는 기능을 사용중입니다.
image

0 Likes

#2

안녕하세요.
Tmap API 운영담당자입니다.

문의주신 gap은 마커 클러스터 옵션인 count로 대체하여
사용하실수 있습니다. count의 경우 gap과는 다르게
표출할 이미지에서 각각 원하는 갯수를 설정할수 있으며 사용과 관련하여,
아래에 예시를 참고하여 사용하시면 도움이 되실겁니다.
distance는 현재 제공해드리는 기능은 없습니다.
다만, 문의주신 내용을 검토하였으며, 업데이트 항목에
포함하여 진행될 수 있도록 하겠습니다.
빠른시일내에 적용하도록 하겠습니다.

아래에는 예시와 가이드 링크를 남겨드리겠습니다.
참고하시면 도움이 되실겁니다.


Ex)
function addMarkerCluster() {
var lat = 37.566680;
var lng = 126.978433;
var markers1 = [];
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
var marker = new Tmapv2.Marker({
position: new Tmapv2.LatLng(lat + (j * 0.001), lng + (i * 0.001)),
label: ‘cluster’,
map: map
});

                markers1.push(marker);
                
                
            }
        }
        var iconss= [
            {
                imageUrl: 'http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_b_x.png',
                size: new Tmapv2.base.Size(30, 30),
                count: 10,
                fontSize: '16px',
                fontColor: 'black'
            },
            {
                imageUrl: 'http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_b_o.png',
                size: new Tmapv2.base.Size(30, 30),
                count: 20,
                fontSize: '16px',
                fontColor: 'black'
            },
            {
                imageUrl: 'http://tmapapis.sktelecom.com/upload/tmap/marker/pin_r_b_i.png',
                size: new Tmapv2.base.Size(30, 30),
                count: 30,
                fontSize: '16px',
                fontColor: 'black'
            }
        ]
        markerCluster = new Tmapv2.extension.MarkerCluster({
            markers: markers1,
            icons : iconss,
            map: map
        });
    }

[MarkerCluster Doc]
http://tmapapi.sktelecom.com/main.html#webv2/docs/WebDocs.extension_MarkerCluster


감사합니다.

0 Likes

#3


문서 수정바랍니다.
icons 라는 옵션 설명은 없네요.

0 Likes

#4

안녕하세요.

T map API운영담당자입니다.

해당 가이드의 내용을 수정하였습니다.
혼란을 드려 죄송합니다.


[Tmapv2.extension.MarkerCluster Doc]
http://tmapapi.sktelecom.com/main.html#webv2/docs/WebDocs.extension_MarkerCluster


감사합니다.

0 Likes