Внешние элементы управления
В отличие от встроенных элементов управления внешние можно добавлять или удалять с карты.
Стандартный набор внешних элементов управления картой включает:
- Тулбар (класс YMaps.ToolBar) – панель инструментов с кнопками, позволяющими перемещать карту, увеличивать ее, а также измерять расстояние на карте с помощью специальной линейки;
- Элемент масштабирования (класс YMaps.Zoom) – позволяет менять разрешение карты с определенным шагом;
- Компактный элемент масштабирования (класс YMaps.SmallZoom) – элемент масштабирования без ползунка, содержащий только кнопки уменьшения и увеличения масштаба;
- Обзорная карта (класс YMaps.MiniMap) – уменьшенная карта показываемой местности, масштаб которой на несколько пунктов отличается от основной;
- Переключатель типа карты (класс YMaps.TypeControl) – кнопки "Карта", "Спутник", "Гибрид";
- Масштабная линейка (класс YMaps.ScaleLine) – позволяет оценивать расстояние между объектами, не прибегая к вычислениям;
- Поиск по карте (класс YMaps.SearchControl) – позволяет искать географические объекты по их названию.
Все элементы управления основаны на интерфейсе YMaps.IControl. Реализовав этот интерфейс, можно создать пользовательский элемент управления.
Тулбар
YMaps.ToolBar – панель инструментов с кнопками (), позволяющими перемещать карту, увеличивать ее, а также измерять расстояние на карте с помощью специальной линейки.
По умолчанию панель инструментов содержит три кнопки для включения/выключения следующих элементов управления:
Следующий код создает панель инструмента со всеми тремя кнопками по умолчанию:
var toolBar = new YMaps.ToolBar();
Если используются не все кнопки, то в конструкторе YMaps.ToolBar перечислите только те из них, которые должны быть добавлены на тулбар. Например:
// Создает панель инструментов без кнопки "Линейка"
var toolBar = new YMaps.ToolBar([
new YMaps.ToolBar.MoveButton(),
new YMaps.ToolBar.MagnifierButton()
]);
Для добавления кнопки на тулбар используйте метод add(), а для удаления - метод remove().
Чтобы добавить разделитель между двумя кнопками тулбара используйте класс YMaps.ToolBarSeparator, например:
// Создает разделитель кнопок тулбара шириной 30 пикселов.
toolBar.add(new YMaps.ToolBarSeparator(30));
Чтобы программно управлять состоянием кнопок тулбара используйте методы select() и deselect().
API Яндекс.Карт также позволяет создавать и добавлять на тулбар пользовательские кнопки следующих видов:
Обычная кнопка
Обычная кнопка после нажатия возвращается в первоначальное состояние.
Чтобы создать обычную кнопку, используйте конструктор класса YMaps.ToolBarButton.
Пример ниже создает кнопку, которая добавляет метку в центр карты:
// Создает кнопку
var button = new YMaps.ToolBarButton({
caption: "Добавить метку",
hint: "Добавляет метку в центр карты"
});
// При щелчке по кнопке включается линейка
YMaps.Events.observe(button, button.Events.Click, function () {
this.addOverlay(new YMaps.Placemark(map.getCenter(), {draggable: true}));
}, map);
Переключатель
Переключатель остается нажатым до тех пор, пока не будет нажат другой переключатель из группы кнопок, в которую он входит. Переключатель всегда принадлежит какой-либо группе кнопок (но возможно создать группу из одного элемента).
Чтобы создать переключатель используйте конструктор класса YMaps.ToolBarRadioButton.
Пример ниже добавляет в группу стандартных кнопок тулбара еще одну кнопку инструмента "Линейка":
// Создает кнопку-переключатель
var button = new YMaps.ToolBarRadioButton(YMaps.ToolBar.DEFAULT_GROUP, {
icon: "https://api-maps.yandex.ru/i/0.3/icons/icon-ruler.png",
hint: "Еще одна линейка"
});
// Включает линейку, когда кнопка-переключатель активна
YMaps.Events.observe(button, button.Events.Select, function () {
this.getMap().enableRuler();
}, toolbar);
// Выключает линейку, когда кнопка-переключатель неактивна
YMaps.Events.observe(button, button.Events.Deselect, function () {
this.getMap().disableRuler();
}, toolbar);
Кнопка-флажок
Кнопка-флажок остается нажатой до тех пор, пока не будет нажата повторно.
Чтобы создать кнопку-флажок используйте конструктора класса YMaps.ToolBarToggleButton.
Пример ниже добавляет на тулбар кнопку-флажок, при выборе которой карта разворачивается на весь экран:
// Создает кнопку-флажок
var button = new YMaps.ToolBarToggleButton({
icon: "/i/maps/icon-fullscreen.png",
hint: "Разворачивает карту на весь экран"
});
// Если кнопка активна, разворачивает карту на весь экран
YMaps.Events.observe(button, button.Events.Select, function () {
setSize();
});
// Если кнопка неактивна, устанавливает фиксированный размер карты
YMaps.Events.observe(button, button.Events.Deselect, function () {
setSize(600, 400);
});
// Функция устанавливает новые размеры карты
function setSize (newWidth, newHeight) {
YMaps.jQuery("#YMapsID").css({
width: newWidth || "",
height: newHeight || ""
});
map.redraw();
}
Элементы масштабирования
API предоставляет два элемента для управления масштабом карты:
- YMaps.Zoom - полный элемент масштабирования;
- YMaps.SmallZoom - компактный элемент масштабирования.
YMaps.Zoom
YMaps.Zoom – элемент масштабирования, позволяющий изменять масштаб карты с определенным шагом. Представляет из себя две кнопки для уменьшения и увеличения масштаба и ползунок.
// Создает элемент масштабирования
var zoomControl = new YMaps.Zoom();
По умолчанию смена масштаба происходит плавно. Чтобы отключить плавное масштабирование карты, передайте в конструктор параметр smooth со значением false
:
// Создает объект YMaps.Zoom с отключенной функцией плавного масштабирования
var zoomControl = new YMaps.Zoom({smooth: false});
При наведении курсора на ползунок показывается всплывающая подсказка. Чтобы отключить отображение подсказки, передайте в конструктор параметр noTips со значением true
:
// Создает элемент масштабирования без всплывающих подсказок
var zoomControl = new YMaps.Zoom({noTips: true});
Для каждого коэффициента масштабирования возможно задать пользовательские всплывающие подсказки:
// Создает объект YMaps.Zoom с пользовательскими подсказками
// Коэффициенту масштабирования 1 соответствует подсказка "Мелко",
// коэффициенту масштабирования 9 - "Средне",
// коэффициенту масштабирования 16 - "Крупно".
var zoom = new YMaps.Zoom({
customTips: [
{ index: 1, value: "Мелко" },
{ index: 9