Drawing Library 문의입니다

우측 상단에 표시되어있는 버튼을 이용하여 지도에 그림을 그리는 기능을 구현하고있습니다.
그림 바로 밑에는 image 마커를 추가하여 마커 클릭시 사용자가 그린 그림을 지우도록 하고 싶습니다.

image 아이콘을 선택 : 지도에 마우스 클릭시 클릭한 위치에 마커를 추가합니다.
image 아이콘을 선택 : 지도에 마우스 클릭시 점을 찍어 선을 그립니다. (종료는 우클릭)
image 아이콘을 선택 : 지도에 마우스 클릭시 점을 찍어 다각형을 그립니다. (종료는 우클릭)

  1. image 마커를 찍고 image 버튼이 클릭된 상태에서 image 마커를 지우기 위해서 image 마커 클릭시 image마커는 지워지나 선의 시작점이 찍히는 문제 ( image 마커의 click이벤트와 지도의 클릭이벤트가 동시에 발생하는것으로 생각됩니다.)

  2. 선의 종료지점에 있는 image 마커 클릭시 해당 선을 지우고 싶습니다.

  3. 다각형을 그릴때 마지막 점을 찍은 위치에 image 마커를 추가하고 싶습니다.

아래는 완성되었을 경우의 가상도입니다.
image

일단 drawing 라이브러리를 사용하는 방향은 어떤가요?
http://apis.map.daum.net/web/sample/basicDrawingLibrary/

이것을 고려해 봤는데도 뭔가 맞지 않아서 직접 구현을 하고자 한다면,

  1. Marker 생성 옵션에 clickable: true 를 추가하면 됩니다.
  2. 가능합니다. x버튼에 click 이벤트만 잘 등록하면 됩니다.
  3. 가능합니다. Map 객체에 click 이벤트를 등록하면 클릭한 위치의 좌표를 받아올 수 있습니다. 이것을 활용하시면 됩니다.
1개의 좋아요

답변 감사합니다. Drawing 라이브러리를 사용하면 될것 같습니다.

샘플에서 선의 거리 계산과 원, 선, 사각형, 다각형 표시만 눈에 띄었어요…

1개의 좋아요

사용자가 지도에 그린 그림의 좌표를 DB에 저장해두었다가 다시 지도 호출시에 DB에 있는 좌표로 그림을 다시 그려줘야 할 경우에는 Drawing 라이브러리를 사용할 수 없어보입니다.

일단 데이터를 export 할 방법으로는
http://apis.map.daum.net/web/sample/drawingGetData/
이런 방식이 있습니다. 다만 GeoJSON과 같은 어느정도 표준이 되는 포멧이 아닌
drawing lib만의 독자 데이터 포멧이기 때문에 이는 감안하셔야 하고요.

외부의 데이터를 drawing lib로 한 번에 밀어넣는(import) 방식은 없고
일일히 하나의 형상 정보마다 아래의 함수로 직접 넣어주셔야 합니다.
http://apis.map.daum.net/web/documentation/#drawing_DrawingManager_put

드로잉 라이브러리가 그리기에 그 목적이 있었기 때문에
필요에 의해 추가된 import/export 기능에 대해서는 불편함이 약간 존재합니다.

1개의 좋아요

좌표를 DB로 저장하는건 자체적으로 구현이 되어있습니다.

다만 저장된 좌표를 호출할 경우 해당 좌표값으로 다시 drawing 를 이용해 그림을 그릴수 있는지 여부가 필요했습니다.

안내해주신 함수를 이용하여 만들면 될것 같습니다.

항상 답변 감사합니다.

1개의 좋아요

1 다각형이나 선을 그릴때 나오는 툴팁의 배경색과 글자색이 비슷하여 글자가 인식되지 않습니다.
툴팁의 색상을 설정하는 옵션이 있나요?

2 .getOverlays([daum.maps.drawing.OverlayType.Marker])로 지도에 그려진 마커 객체가 있는지 확인했는데 지도에 추가된 마커 객체가 없음에도 [object object]를 반환합니다.

var marker = manager.getOverlays([daum.maps.drawing.OverlayType.Marker]);
alert(marker);    // [object object] 발생

3 Drawing Library로 마커를 추가한 뒤 위치를 변경할 수 있나요? 지도 클릭시 클릭이벤트로 마우스 좌표값을 받아 마커를 이동하고 싶습니다.

4 그려져 있는 여러개의 선 중 하나를 지웠을때 지워진 선을 특정할 수 있는 키가 있을까요?

image

  1. 해당 툴팁에 inline style로 지정했기 때문에 제대로 나오지 않는 것은 이상하네요.
    일단 브라우저 테스트를 어디서 했는지 알려주시고
    페이지 전체의 CSS 중 <p> 태그의 ‘color’ 속성값을 지정하고 있는지 확인해 주세요.

  2. getOverlays() 함수가 반환하는 값은 객체입니다.
    객체 안에 각 형상에 대한 배열이 있으며 배열에 현재 지도에 그려진 형상 객체들이 들어갑니다.
    image

  3. 마커 옵션으로 드래그 가능한 마커가 생성되도록 할 수 있습니다.
    이 옵션을 설정하고 만든 마커는 마우스 드래그로 이동시킬 수 있습니다.

    markerOptions: {
      draggable: true,
      removable: true,
      markerImages: [
      // 이하 생략
    
  4. 라이브러리에서는 삭제된 선이 무엇인지 아는 방법은 이벤트상에서 받는 방법 뿐입니다.

    manager.addListener('remove', function(data) {
      console.log(data);
    });
  1. 페이지의 공통css에 P태그에 color를 "#4F4F4F"로 주는 부분이 있어서 해당 css를 제거하니 정상적으로 나옵니다.

  2. var marker = manager.getOverlays([daum.maps.drawing.OverlayType.Marker]);
    alert(JSON.stringify(marker);
    

    라고 찍을 경우 getOverlays에 marker에 대한 정보만 받아오게 하였으므로 var marker안에는 {key: value} 형태로 {marker: Array(0)} 이 들어있다는 말씀이신가요? alert에 찍힌 값은 {} 가 찍힙니다.

  3. 드래그가 아닌 클릭시 마커의 위치를 변경하도록 구현해야합니다. 그럼 마우스 클릭이벤트에 기존에 생성된 마커를 지우고 마우스 좌표값으로 새로운 마커를 manager.put으로 넣어줘도 상관이 없을까요?

  4. 만약 marker를 지웠다면 해당 마커의 좌표를 출력하는 예제 하나만 보여주실 수 있으신가요

  1. 문서가 잘못되어 있군요. 이건 문서를 수정하겠습니다. 문제 제기 감사합니다.

    manager.getOverlays([daum.maps.drawing.OverlayType.Marker]); // <= (X)
    manager.getOverlays([daum.maps.drawing.OverlayType.MARKER]); // <= (O)

  2. 하나의 지도 위에 어려개의 마커가 올라가는게 아닌가 보네요?
    마커 이동을 하기 위한 유저의 동선이 어떻게 클릭으로 되는건지 모르겠습니다.
    일단 마커를 클릭한 위치에 넣는건

    daum.maps.event.addListener(map, 'click', function (event) {
        manager.put(daum.maps.drawing.OverlayType.MARKER, event.latLng, 0)
    });
    

    이렇게 되지만, 이게 원하는 기능인지는 모르겠네요.

  3. 삭제 이벤트에서 받아서 출력합니다.

    manager.addListener('remove', function (event) {
        console.log(event.target.getPosition().toString());
    });

※ 저희 웹페이지가 IE7을 기준으로 만들어져서 console.log를 통해 Object의 내용을 확인할 수 없습니다.

  1. 하나의 지도 위에는 최대 1개의 마커만 생성이 되야합니다.
    (그러므로 클릭 이벤트 발생시 단순 마커 추가가 아닌 마커제거+마커추가을 이용하여 마커 이동을 표현하고자 합니다.)
    첨부하여주신 소스로 사용자 클릭 위치에 마커생성은 됩니다만 마커 생성전에 기존 올라가있는 마커를 삭제하고자 하여

    manager.addListener('drawend', function (mouseEvent) {
        manager.remove(daum.maps.drawing.OverlayType.MARKER); // 마커를 삭제합니다.
        manager.put(daum.maps.drawing.OverlayType.MARKER, mouseEvent.coords.toLatLng(), 0);
    });
    

    위처럼 코드를 작성하면 아래처럼 에러메시지가 나옵니다.
    지도에는 마커가 그려져 있는 상태입니다.

    SCRIPT438: 개체가 'remove' 속성이나 메서드를 지원하지 않습니다. drawing.js (218,481)
    

    +문서에 setPosition이라고 하는 메서드가 있는데 해당 메서드를 이용해서 마커의 좌표를 변경할 순 없나요?

  2. 선이나 다각형의 경우에는 getPosition로 호출시 에러가 납니다. 어떤 메서드를 사용하면되는지
    또 클릭이벤트나 그리기 이벤트를 실행했을때 넘어오는 데이터에 관한 문서가 있을까요?

  3. (추가) 지도 생성시에 지도 전체가 ‘데이터 로딩중’ 이라고하는 회색 DIV로 뒤덮입니다. 지도의 생성 순서는

    function onLoad() {
        setLatLng();  // 중심좌표 설정
        drawMap();  // mapContainer, mapOption으로 지도 생성
        addControl();  // 줌아웃, 로드뷰 전환 버튼 추가
        drawingOption();  // Drawing Library Option 설정
        drawingManager();  // Drawing Library 추가
    }
    

입니다. 각 function안에는 모두 전역변수를 사용하여 값을 공유합니다. 지도를 클릭하거나 다른 인터넷 브라우저, 줌아웃 등의 '어떠한 동작’이라도 할 경우 지도가 바로 표출이 되지만 '어떠한 동작’도 하지 않을경우 계속 회색 div만 표출합니다.

image

※ IE7 이하는 지도 API의 브라우저 대응범위가 아니오니 양해 부탁드립니다.

  1. 일단 manager.addListener의 콜백에서 받는 event객체는 마우스 이벤트가 아닙니다. 그리고 manager.remove() 에 넘기는 arg는 type이 아니라 실제 오버레이 객체가 되어야 합니다. 따라서 다음과 같은 로직이 되어야 합니다.

    var target = null;
    
    manager.addListener('drawend', function (e) {
        target = e.target;
    });
    
    daum.maps.event.addListener(map, 'click', function (event) {
        if (target) {
            manager.remove(target);
            manager.put(daum.maps.drawing.OverlayType.MARKER, event.latLng, 0);
            var overlays = manager.getOverlays();
            target = overlays[daum.maps.drawing.OverlayType.MARKER][0];
        }
    });
    

    대신 마커를 1개 이상 만드려는 시도는 예외처리를 하여 막아주셔야 합니다.

  2. 선이나 다각형은 getPath() 입니다. 좌표객체인 daum.maps.LatLng 들의 배열이 반환됩니다.
    원, 타원, 사각형은 getBounds() 입니다. 좌표영역객체인 daum.maps.LatLngBounds 가 반환됩니다.
    문서는 없습니다. 해당 기능은 혹시나 하는 마음에 남겨둔 것이며 사용이 권장되어지지 않습니다. 문서에 없는 일부 기능은 부작용이 있을 수 있습니다.

  3. 현재 작성하신 코드가 잘못된 것은 아니라고 예상되며 알려진 바가 없는 이슈네요. 지도 내부의 일부 엘리먼트들, 특히 지도 타일 이미지와 관련된 레이어가 layout을 제대로 잡지 못하여 생기는 문제일 것 같습니다. 초기 시점에 특정 속성값이 부여되지 않아서 rendering을 제대로 하지 못한 상황이 아닐까 조심스럽게 예측해 봅니다. 아무래도 IE7이면 hasLayout 과 관련된 hack을 사용해야 하지 않을까 싶긴 한데… 대응 범위를 벗어나는 것도 있고, 제가 재현을 하기 힘든 상황이니만큼 큰 도움을 드리기 힘들 것 같네요.

1개의 좋아요

답변 감사합니다.

기능을 새로 추가하는것이면 간단하게 해결할텐데 기존에 있던 기능과 동일하도록 만들어야하니 어렵네요