드로잉 레이어(라이브러리)

개요
라이브러리 사용
DrawingManager 옵션
그리기 도구 컨트롤 업데이트
그리기 이벤트

개요

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

라이브러리 사용

그리기 도구는 기본 지도 API 자바스크립트 코드와 별도로, 필요한 모든 기능이 포함된 독립 라이브러리입니다. 이 라이브러리에 포함된 기능을 사용하려면 먼저 지도 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 생성자는 표시할 컨트롤 집합, 컨트롤 위치 및 초기 그리기 상태를 정의하는 옵션의 집합을 취합니다.

DrawingManager의 drawingMode 속성은 DrawingManager의 초기 그리기 상태를 정의하며, google.maps.drawing.OverlayType 상수가 허용됩니다. 기본값은 null로, 이 경우 DrawingManager가 초기화될 때 커서가 그리기 모드가 아닌 모드에 있습니다.
DrawingManager의 drawingControl 속성은 지도에 그리기 도구 선택 인터페이스를 표시하는지 여부를 정의하며, 불리언 값이 허용됩니다.
또한 DrawingManager의 drawingControlOptions 속성을 사용하여 컨트롤의 위치, 컨트롤에 표시해야 하는 오버레이의 유형도 정의할 수 있습니다.
- position은 지도에서 그리기 컨트롤의 위치를 정의하며, google.maps.ControlPosition 상수가 허용됩니다.
- drawingModes는 google.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;index.ts

자바스크립트

// 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;index.js

예 보기

샘플 사용해 보기

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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

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

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