Внешние элементы управления

В отличие от встроенных элементов управления внешние можно добавлять или удалять с карты.

Стандартный набор внешних элементов управления картой включает:

Все элементы управления основаны на интерфейсе 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);

Открыть пример в новом окне

Переключатель

Переключатель остается нажатым до тех пор, пока не будет нажат другой переключатель из группы кнопок, в которую он входит. Переключатель всегда принадлежит какой-либо группе кнопок (но возможно создать группу из одного элемента).

Примечание. Группа стандартных кнопок тулбара имеет ID YMaps.ToolBar.DEFAULT_GROUP.

Чтобы создать переключатель используйте конструктор класса 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