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

  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 отключаются во время рисования на карте.