Слой чертежа (библиотека)

  1. Обзор
  2. Воспользуйтесь библиотекой
  3. Параметры DrawingManager
  4. Обновите элемент управления «Инструменты рисования»
  5. События розыгрыша

Обзор

Класс DrawingManager предоставляет пользователям графический интерфейс для рисования многоугольников, прямоугольников, полилиний, кругов и маркеров на карте.

Воспользуйтесь библиотекой

Инструменты рисования — это самостоятельная библиотека, отдельная от основного JavaScript-кода API Карт. Чтобы использовать функциональность этой библиотеки, необходимо сначала загрузить её с помощью параметра libraries в URL-адресе начальной загрузки API Карт:

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

После добавления параметра libraries вы можете создать объект DrawingManager следующим образом:

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

Параметры DrawingManager

Конструктор DrawingManager принимает набор параметров, которые определяют набор отображаемых элементов управления, положение элемента управления и начальное состояние рисования.

  • Свойство drawingMode объекта DrawingManager определяет начальное состояние отрисовки. Оно принимает константу google.maps.drawing.OverlayType . Значение по умолчанию — null , что означает, что курсор находится в режиме без отрисовки при инициализации DrawingManager.
  • Свойство drawingControl объекта DrawingManager определяет видимость интерфейса выбора инструментов рисования на карте. Оно принимает логическое значение.
  • Вы также можете определить положение элемента управления и типы наложений, которые должны быть представлены в элементе управления, используя свойство drawingControlOptions объекта DrawingManager .
    • position определяет положение элемента управления рисованием на карте и принимает константу google.maps.ControlPosition .
    • drawingModes — это массив констант google.maps.drawing.OverlayType , который определяет типы наложений, включаемые в выбор формы элемента управления рисованием. Значок руки будет присутствовать всегда, позволяя пользователю взаимодействовать с картой без рисования. Порядок инструментов в элементе управления будет соответствовать порядку, в котором они объявлены в массиве.
  • Каждому типу наложения можно назначить набор свойств по умолчанию, которые определяют его внешний вид при создании. Они определяются в свойстве {overlay}Options этого наложения (где {overlay} соответствует типу наложения). Например, свойства заливки и обводки круга, zIndex и кликабельность можно определить с помощью свойства circleOptions . Если передаются какие-либо значения размера, местоположения или карты, они игнорируются. Подробную информацию о доступных для установки свойствах см. в справочной документации API .

Примечание: чтобы сделать фигуру доступной для редактирования пользователем после ее создания, установите для ее свойства editable значение true .

Машинопись 

// 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 остаются доступными. Таким образом, вы можете реализовать свой собственный элемент управления. Удаление DrawingManager из объекта map отключает все функции рисования; для восстановления элементов чертежа его необходимо заново прикрепить к карте с помощью 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();
  }
});

Обратите внимание, что события google.maps.Map , такие как click и mousemove , отключены во время рисования на карте.