드로잉된 영역의 마크 데이터 얻기

카카오맵 API (지도/로컬)
1

clusterer API를 활용하여 마크설정을 해놓은 상태입니다.

드로잉 API를 사용하여 드로잉된 부분의 마크 데이터를 가져오려면 어떤 예제를 봐야하나요??

2

드로잉된 부분의 마크데이터를 가져온다는 게 어떤 의미인가요?

3

밑의 그림처럼 마커들을 저렇게 원으로 선택해서 저 마커들에 대한 데이터를 가져오고싶습니다.

질문

4

추가로 선택한 드로잉이 아닌 여러개의 마크를 클릭으로 선택해서 데이터를 가져오는 방법도 있는지 궁금합니다.

5

어떤 데이터를 말씀하시는지 모르겠으나
그게 그 지점의 좌표값이라고 가정하고 말씀드리면

마커 클릭 이벤트를 등록하여
마커를 클릭했을때, 해당 마커의 좌표를 얻을 수 있습니다.

http://apis.map.daum.net/web/sample/addMarkerClickEvent/
위 샘플에서 클릭 이벤트 리스너 내용을 다음과 같이 바꾸면 가능합니다.

// 마커에 클릭이벤트를 등록합니다
daum.maps.event.addListener(marker, 'click', function() {
    var pos = marker.getPosition(); // returns daum.maps.LatLng
});

drawing API를 사용해서 선택된 반경 내 마커들의 정보를 가져오려면
선언한 마커들을 모두 배열(markers)에 넣어 관리한 뒤,
아래의 코드로 받아 볼 수 있습니다.

var markers = [ /*marker1, marker2, marker3 ... */ ]; // 화면에 올린 마커들을 가진 배열

var range = null; // 반경 검색을 위해 그린 원 객체 참조
var markersInCircle = []; // 결과를 담을 배열

manager.addListener('select', function (e) {
    if (e.overlayType === daum.maps.drawing.OverlayType.CIRCLE) {
        if (range) {
            manager.remove(range); // 기존에 지도위에 그려진 원은 삭제
        }
    }
});

manager.addListener('drawend', function (e) {
    markersInCircle.length = 0; // 기존 결과 초기화

    if (e.overlayType === daum.maps.drawing.OverlayType.CIRCLE) {
        var circle = e.target;
        var center = circle.getPosition();
        var radius = circle.getRadius(); // m 단위
        
        var line = new daum.maps.Polyline(); // for calculating length

        markers.forEach(function(marker) {
            var path = [ marker.getPosition(), center ];
            line.setPath(path);
            
            var dist = line.getLength();

            if (dist < radius) {
                markersInCircle.push(marker);
            }
        });
        
        range = circle; // 다음 반경 선택시 지워주기 위해 참조 저장

        console.log('result: ', markersInCircle); // 결과
    }
});

컨셉만 알려드린 것이며 응용은 개발자 몫입니다.
위 코드 사용에 대한 책임은 지지 않으며
기능 추가 및 변경에 대한 지원은 해 드리지 않으니 참고 바랍니다.

1개의 좋아요