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

  1. 개요
  2. 라이브러리 사용
  3. DrawingManager 옵션
  4. 그리기 도구 컨트롤 업데이트
  5. 그리기 이벤트

개요

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

라이브러리 사용

그리기 도구는 기본 지도 API JavaScript 코드와 별도로, 필요한 모든 기능이 포함된 독립 라이브러리입니다. 이 라이브러리에 포함된 기능을 사용하려면 먼저 지도 API 부트스트랩 URL의 libraries 매개변수를 사용하여 로드해야 합니다.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&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

JavaScript

// 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
예 보기

샘플 사용해 보기

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

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 이벤트는 사용 중지됩니다.