그리기 계층(라이브러리)

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
  1. 개요
  2. 라이브러리 사용
  3. DrawingManager 옵션
  4. 그리기 도구 컨트롤 업데이트
  5. 그리기 이벤트

개요

DrawingManager 클래스는 사용자가 지도에 다각형, 직사각형, 다중선, 원, 마커를 그릴 수 있는 그래픽 인터페이스를 제공합니다.

라이브러리 사용

그리기 도구는 기본 Maps API 자바스크립트 코드와는 별도로 독립적인 라이브러리입니다. 이 라이브러리에 포함된 기능을 사용하려면 먼저 Maps API 부트스트랩 URL에서 libraries 매개변수를 사용하여 로드해야 합니다.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap">
</script>

라이브러리 매개변수를 추가한 후에는 다음과 같이 DrawingManager 객체를 만들 수 있습니다.

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

DrawingManager 옵션

DrawingManager 생성자는 표시할 컨트롤 집합, 컨트롤 위치 및 초기 그리기 상태를 정의하는 옵션 집합을 사용합니다.

  • DrawingManagerdrawingMode 속성은 DrawingManager의 초기 그리기 상태를 정의합니다. google.maps.drawing.OverlayType 상수를 허용합니다. 기본값은 null이며, 이 경우 커서는 DrawingManager가 초기화될 때 비 그리기 모드에 있습니다.
  • DrawingManagerdrawingControl 속성은 지도에 그리기 도구 선택 인터페이스의 공개 상태를 정의합니다. 부울 값을 허용합니다.
  • 컨트롤의 위치와 DrawingManagerdrawingControlOptions 속성을 사용하여 컨트롤에 표시해야 하는 오버레이 유형을 정의할 수도 있습니다.
    • position는 지도에 그리기 컨트롤의 위치를 정의하고 google.maps.ControlPosition 상수를 허용합니다.
    • drawingModesgoogle.maps.drawing.OverlayType 상수의 배열이며 그리기 컨트롤 도형 선택 도구에 포함할 오버레이 유형을 정의합니다. 손 모양이 항상 표시되므로 사용자가 그림을 그리지 않고 지도와 상호작용할 수 있습니다. 컨트롤의 도구 순서는 배열에서 선언된 순서와 일치합니다.
  • 각 오버레이 유형을 처음 만들 때 오버레이의 모양을 정의하는 기본 속성 집합을 할당할 수 있습니다. 이는 오버레이의 {overlay}Options 속성에 정의되어 있습니다 ({overlay}는 오버레이 유형을 나타냄). 예를 들어 원의 채우기 속성, 획 속성, zIndex, 클릭 가능성은 circleOptions 속성을 사용하여 정의할 수 있습니다. 임의의 크기, 위치 또는 지도 값을 전달하면 무시됩니다. 설정할 수 있는 속성에 관한 자세한 내용은 API 참조 문서를 참고하세요.

참고: 모양을 만든 후에 사용자가 편집 가능하게 하려면 editable 속성을 true로 설정합니다.

TypeScript

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    }
  );

  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

자바스크립트

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE,
      ],
    },
    markerOptions: {
      icon: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    },
    circleOptions: {
      fillColor: "#ffff00",
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1,
    },
  });

  drawingManager.setMap(map);
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

그리기 도구 컨트롤 업데이트

DrawingManager 객체가 만들어지면 setOptions()를 호출하고 새 값을 전달하여 업데이트할 수 있습니다.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

그리기 도구 컨트롤을 숨기기거나 표시하려면 다음과 같이 합니다.

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

map 객체에서 그리기 도구 컨트롤을 삭제하는 방법은 다음과 같습니다.

drawingManager.setMap(null);

그리기 컨트롤을 숨기면 그리기 도구 컨트롤이 표시되지 않지만 DrawingManager 클래스의 모든 기능은 계속 사용할 수 있습니다. 이러한 방식으로 필요한 경우 자신만의 컨트롤을 구현할 수 있습니다. map 객체에서 DrawingManager삭제하면 모든 그리기 기능이 사용 중지됩니다. 그리기 기능을 복원하려면 이 객체를 drawingManager.setMap(map) 또는 새 DrawingManager 객체로 지도에 다시 연결해야 합니다.

그리기 이벤트

셰이프 오버레이가 생성되면 두 가지 이벤트가 발생합니다.

  • {overlay}complete 이벤트({overlay}는 오버레이 유형(예: circlecomplete, polygoncomplete 등)을 나타냄) 오버레이 참조가 인수로 전달됩니다.
  • overlaycomplete 이벤트 OverlayType 및 오버레이에 대한 참조를 포함하는 객체 리터럴이 인수로 전달됩니다.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

지도에 그리는 동안 clickmousemove와 같은 google.maps.Map 이벤트는 사용 중지됩니다.