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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
  1. Обзор
  2. Использование библиотеки
  3. Параметры диспетчера чертежей
  4. Обновление элемента управления инструментами рисования
  5. События рисования

Обзор

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

Использование библиотеки

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

<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 принимает набор параметров, определяющих набор отображаемых элементов управления, положение элемента управления и начальное состояние рисования.

  • Свойство 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;

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;
Посмотреть пример

Попробуйте образец

Обновление элемента управления инструментами рисования

После создания объекта 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 мыши, отключаются при рисовании на карте.