원안의 좌표값 가져오기

지도/로컬 API
1

그림과 같이 원안에 들어오는 마커들의 좌표값을 가져오고 싶습니다. 어떤 예제를 봐야하나요?

image

2

https://devtalk.kakao.com/t/topic/71703/5?u=doji.doo

전에 답변 드렸는데요… ㅠㅠ

3

네ㅜㅜ 일단 답변은 잘 받았습니다.

근데 잘 되지않아 다시한번 질문 드린것이며 다시한번 차근차근 봐보겠습니다.

4

어느 부분이 어떻게 안되시는지 구체적으로 정리하셔서 다시 질문을 이어가시는게 좋을듯합니다.
안타깝지만, 질문 관련해서 저 말고는 답변드릴 분이 없을 것 같은데요.

5

제가 드린 코드, 동작하는 것 확인하고 올린것이긴 합니다만 분명히 버그가 있을 수 있습니다.

아무리 사용에 대한 책임은 지지 않는다고 글을 달았지만
제가 잘못된 코드를 올렸다면 그것에 대한 책임은 당연히 져야겠죠.

어디에서 막히셨는지 말씀해 주세요. 확인해 보겠습니다.

6

문제점1: 원을 그리고 나서 삭제가 가능하나 다시 그리기 안됨
문제점2: 원을 그리고 나서 원의 이동 및 크기조절 안됨
문제점3: Uncaught TypeError: markers.forEach is not a function이라는 문제가 발생하며 해당 코드는 다음과 같습니다.

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);
            }
        });
7

아무래도 밑의 코드부분에서 문제가 발생하는 것 같습니다.

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

            if (dist < radius) {
                markersInCircle.push(marker);
            }
        });
8

작성하신 코드에서는 markers가 jQuery로 래핑된 array-like 객체입니다.
(제가 작성한 코드에서의 markers는 자바스크립트의 기본 Array 객체입니다.)

위 코드 기준으로 가장 손쉽게 변경할 수 있는 방법은

markers.each(function(_, marker) { // jQuery.each 를 사용하는 방식으로 변경
    var path = [ marker.getPosition(), center ];
    line.setPath(path);
        
    var dist = line.getLength();

    if (dist < radius) {
        markersInCircle.push(marker);
    }
});

크기 조절을 해서 마커를 다시 선택해야 한다면… 불가능할거 같아요.
그것을 위한 이벤트는 존재하지 않아서 구현은 힘들 것 같고요.
위의 코드 기준으로는 기존 원을 지우고 다시그려서 선택하는 방법만 가능합니다.

9

‘state_changed’ 라는 이벤트가 존재는 하나, 이걸 써서 구현하려면… 글쎄요… 제가 해 본적은 없어서…
상태 관리가 복잡해 보이긴 한데
가능할 수는 있겠네요.
힘들다는건 변함 없겠지만요. ^^;

10

감사합니다 말씀하신대로 해당부분 코드를 변경하니 로그가 잘 표현됩니다… 너무나 감사합니다!!!
image

1개의 좋아요