- Обзор
- Использование библиотеки
- Параметры DrawingManager
- Обновление элемента управления Drawing Tools
- События рисования
Обзор
Класс DrawingManager
обеспечивает графический интерфейс, позволяющий пользователям рисовать на карте многоугольники, прямоугольники, ломаные линии, окружности и маркеры.
Использование библиотеки
Drawing Tools – это автономная библиотека, отделенная от основного кода 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
Конструктор 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}
обозначает тип наложения). Например, с помощью свойстваcircleOptions
можно задать свойства заливки, толщины линии, zIndex и поддержки нажатия для окружности. В случае передачи значений размера, местоположения или карты эти данные игнорируются. Более подробную информацию о том, какие свойства можно устанавливать, можно найти в справочнике по 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;
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;
Примеры кода
Обновление элемента управления Drawing Tools
После создания объект 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
, во время рисования на карте отключены.