Недавно в Google Maps API V3 появилась новая библиотека Drawing. Она предоставляет набор инструментов, с помощью которых пользователи могут ставить маркеры, рисовать на карте линии, круги, прямоугольники, многоугольники, чтобы выделить различные места на карте.
![image](http://kovtun-andrei.narod2.ru/habr/i/google_maps_drawing.gif)
Данные инструменты могут быть использованы для сбора разной информации от пользователей. Приложение может прослушивать события и реагировать соответствующим образом, например, сделать поисковый запрос или сохранить информацию в базе данных.
Чтобы работать с библиотекой Drawing, нужно при подключении js Google Maps, добавить параметр libraries=drawing:
Класс DrawingManager из этой библиотеки предоставляет графический интерфейс для пользователей. Он включает в себя многоугольники, прямоугольники, ломаные линии, круги и маркеры на карте.
Объект DrawingManager создается следующим образом:
Теперь на карте появились пользовательские инструменты для рисования.
![image](http://kovtun-andrei.narod2.ru/habr/i/google_maps_drawing2.gif)
Мы можем настроить, какие именно инструменты мы хотим предоставить пользователю, а также их положение на карте и вид:
drawingControl — определяет видимость инструментов на карте. Он принимает логическое значение true/false.
drawingControlOptions — определяет позицию инструментов на карте, а также список инструментов, которые вы хотите включить.
— position — позиция инструментов рисования. По умолчанию TOP_LEFT.
— drawingModes — инструменты для отображения и их порядок. Значок руки всегда доступен и он не указывается в этом массиве. По умолчанию [MARKER, POLYLINE, RECTANGLE, CIRCLE, POLYGON].
drawingMode — определяет, какой инструмент будет выделен по умолчанию.
circleOptions {}
markerOptions {}
polygonOptions {}
polylineOptions {}
rectangleOptions {}
Для каждого инструмента можно указать свои специфические опции. К примеру, иконку маркера, цвет заливки фигуры, zindex, кликабельность и т.п. Полную информацию по каждой опции можно узнать в документации API.
Также можно указать будет ли у пользователей возможность редактировать фигуру после создания. Для этого установите опцию editable в true.
Для примера, добавим на карту возможность ставить маркеры, рисовать круги и многоугольники, установим панель инструментов вверху по центру и зададим иконку для маркера и некоторые опции для кругов.
Когда объект DrawingManager создан, его можно обновить с помощью функции setOptions().
К примеру, можно задать новое положение для инструментов:
Или изменить цвет заливки кругов:
Либо, например, по клику на кнопке, спрятать или показать панель инструментов:
После появления панели инструментов, все опции, которые вы задавали для нее сохраняются.
Если же вы хотите совсем удалить панель инструментов, то нужно вызвать:
Когда пользователь рисует на карте, устанавливает маркер, то вызываются два события:
1) {overlay}complete — где {overlay} это тип объекта, который создал пользователь, например circlecomplete, polygoncomplete и т.д.). Ссылка на этот объект передается в качестве аргумента.
2) overlaycomplete — в качестве аргумента передается OverlayType и ссылка на созданный объект.
К примеру, при установке маркера пользователем, мы можем получить координаты и вывести их или сохранить в базе данных.
Пример работы библиотеки
Документация
![image](http://kovtun-andrei.narod2.ru/habr/i/google_maps_drawing.gif)
Данные инструменты могут быть использованы для сбора разной информации от пользователей. Приложение может прослушивать события и реагировать соответствующим образом, например, сделать поисковый запрос или сохранить информацию в базе данных.
Чтобы работать с библиотекой Drawing, нужно при подключении js Google Maps, добавить параметр libraries=drawing:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
DrawingManager:
Класс DrawingManager из этой библиотеки предоставляет графический интерфейс для пользователей. Он включает в себя многоугольники, прямоугольники, ломаные линии, круги и маркеры на карте.
Объект DrawingManager создается следующим образом:
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
Теперь на карте появились пользовательские инструменты для рисования.
![image](http://kovtun-andrei.narod2.ru/habr/i/google_maps_drawing2.gif)
Опции:
Мы можем настроить, какие именно инструменты мы хотим предоставить пользователю, а также их положение на карте и вид:
drawingControl — определяет видимость инструментов на карте. Он принимает логическое значение true/false.
drawingControlOptions — определяет позицию инструментов на карте, а также список инструментов, которые вы хотите включить.
— position — позиция инструментов рисования. По умолчанию TOP_LEFT.
— drawingModes — инструменты для отображения и их порядок. Значок руки всегда доступен и он не указывается в этом массиве. По умолчанию [MARKER, POLYLINE, RECTANGLE, CIRCLE, POLYGON].
drawingMode — определяет, какой инструмент будет выделен по умолчанию.
circleOptions {}
markerOptions {}
polygonOptions {}
polylineOptions {}
rectangleOptions {}
Для каждого инструмента можно указать свои специфические опции. К примеру, иконку маркера, цвет заливки фигуры, zindex, кликабельность и т.п. Полную информацию по каждой опции можно узнать в документации API.
Также можно указать будет ли у пользователей возможность редактировать фигуру после создания. Для этого установите опцию editable в true.
Для примера, добавим на карту возможность ставить маркеры, рисовать круги и многоугольники, установим панель инструментов вверху по центру и зададим иконку для маркера и некоторые опции для кругов.
var drawingManager = new google.maps.drawing.DrawingManager({
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]
},
drawingMode: google.maps.drawing.OverlayType.MARKER,
markerOptions: {
icon: new google.maps.MarkerImage('http://www.example.com/icon.png')
},
circleOptions: {
fillColor: '#ffffff',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
zIndex: 1,
editable: true
}
});
Изменение опций:
Когда объект DrawingManager создан, его можно обновить с помощью функции setOptions().
К примеру, можно задать новое положение для инструментов:
drawingManager.setOptions({
drawingControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
}
});
Или изменить цвет заливки кругов:
drawingManager.setOptions({
circleOptions: {
fillColor: '#000000'
}
});
Либо, например, по клику на кнопке, спрятать или показать панель инструментов:
// To hide:
drawingManager.setOptions({
drawingControl: false
});
// To show:
drawingManager.setOptions({
drawingControl: true
});
После появления панели инструментов, все опции, которые вы задавали для нее сохраняются.
Если же вы хотите совсем удалить панель инструментов, то нужно вызвать:
drawingManager.setMap(null);
События:
Когда пользователь рисует на карте, устанавливает маркер, то вызываются два события:
1) {overlay}complete — где {overlay} это тип объекта, который создал пользователь, например circlecomplete, polygoncomplete и т.д.). Ссылка на этот объект передается в качестве аргумента.
2) overlaycomplete — в качестве аргумента передается OverlayType и ссылка на созданный объект.
К примеру, при установке маркера пользователем, мы можем получить координаты и вывести их или сохранить в базе данных.
google.maps.event.addListener(drawingManager, 'markercomplete', function(marker) {
console.log(marker.getPosition().toString())
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.MARKER) {
console.log('Установлен маркер')
}
});
Ссылки:
Пример работы библиотеки
Документация