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

  1. Обзор
  2. Использование библиотеки
  3. Параметры Диспетчера рисования
  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>

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

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

Параметры Диспетчера рисования

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

  • Свойство drawingMode объекта DrawingManager определяет исходное состояние рисования 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 отключаются во время рисования на карте.