Стандартные элементы управления

В API Яндекс.Карт доступны следующие элементы управления:

  • Геолокация – определяет текущее местоположение пользователя;
  • Поиск по карте – ищет географические объекты и организации;
  • Панель маршрутизации – прокладывает маршрут по заданным точкам. Элемент управления доступен в API начиная с версии 2.1.54;
  • Пробки – показывает пробки на карте;
  • Переключатель слоев карты – переключает отображаемый слой карты (схема, спутник и гибрид). Кроме того, элемент позволяет показывать на карте сетку панорам;
  • Переход в полноэкранный режим – разворачивает карту на все окно браузера;
  • Ползунок масштаба – увеличивает или уменьшает масштаб карты;
  • Линейка – измеряет расстояние между заданными точками;
  • Кнопка – позволяет добавить стандартную кнопку и настроить для нее произвольное поведение;
  • Выпадающий список – позволяет добавить элемент управления в виде раскрывающегося меню.

Ниже предоставлена расширенная информация об элементах управления.

Геолокация

Класс control.GeolocationControl.

Позволяет определить местоположение пользователя путем вызова стандартной геолокационной функции браузера и/или по ip-адресу пользователя.

Ниже приведен пример добавления кнопки геолокации.

var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64],
        controls: ['geolocationControl'],
        zoom: 10
    });
Скопировано

Поиск по карте

Класс control.SearchControl.

Осуществляет поиск объектов на карте. Позволяет искать не только географические объекты, но также и организации (эту возможность нужно включить через опцию provider). Объекты можно искать по названию, адресу или географическим координатам.

У этого элемента управления есть два представления:
  • полное – в виде поисковой строки;
  • компактное – в виде кнопки поиска.

Подробнее про адаптивность.

// Создадим поисковую строку.
var inputSearch = new ymaps.control.SearchControl({
        options: {
            // Пусть элемент управления будет
            // в виде поисковой строки.
            size: 'large',
            // Включим возможность искать
            // не только топонимы, но и организации.
            provider: 'yandex#search'            
        }
    }),
// Добавим поисковую строку на карту. 
    myMap = new ymaps.Map('map', {
        zoom: 12,
        center: [55.76, 37.64],
        controls: [inputSearch]
    });
Скопировано

Панель маршрутизации

Класс control.RouteButton.

Строит маршрут по двум заданным точкам.

При нажатии на кнопку откроется всплывающая панель с настройками маршрута. Через эту панель пользователи могут задать пункт отправления и назначения, а также указать тип маршрута: на автомобиле, на общественном транспорте или пешком.

Начальную и конечную точки маршрута можно задать несколькими способами:
  • кликом по карте;
  • указав адрес в поле ввода;
  • по кнопке определения местоположения (на рисунке эта кнопка показана в поле ввода для точки «B»);
  • программно, через метод control.routePanel.state.set().

Пример добавления элемента управления на карту:

// Пример добавления панели маршрута.
var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        controls: ['routeButtonControl'],
        zoom: 12
    }),
// Получим ссылку на элемент управления.
    control = myMap.controls.get('routeButtonControl');

// Программно установим начальную точку маршрута.
control.routePanel.state.set('from', 'чернышевская');
Скопировано
Примечание. Элемент управления control.RouteButton доступен в API начиная с версии 2.1.54.
У данного элемента управления есть несколько представлений: полное (и подпись и иконка), стандартное (только подпись) и компактное (только иконка). Подробнее про адаптивность.

Пробки

Класс control.TrafficControl

Позволяет показывать пробки на карте. Может быть показана как текущая информация, так и статистика по загрузке дорог в указанное время.

В зависимости от размеров карты элемент будет иметь разное представление:
  • подробное (для карт больших размеров) – с расширенной информацией и возможностью посмотреть статистику;
  • компактное (для небольших карт) – только кнопка включения и выключения дорожной информации.

Подробнее про адаптивность.

// Добавим «Пробки».
var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64],
        controls: ['trafficControl'],
        zoom: 12
    }),
// Получим доступ к элементу управления.
    control = myMap.controls.get('trafficControl');

// Покажем пробки на карте.
control.showTraffic();
Скопировано

Переключатель слоев карты

Класс control.TypeSelector.

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

У кнопки есть два представления: подробное (для карт больших размеров) и компактное (см. рисунок). Подробнее про адаптивность.

Пример добавления «Переключателя слоев»:

var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64],
        controls: ['typeSelector'],
        zoom: 12
    });
Скопировано

Полноэкранный режим

Класс control.FullscreenControl.

Включает/отключает полноэкранный режим. При нажатии на эту кнопку карта развернется на все окно браузера.

Пример добавления кнопки для перехода в полноэкранный режим:

var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64],
        controls: ['fullscreenControl'],
        zoom: 12
    });
Скопировано

Ползунок масштаба

Класс control.ZoomControl.

Позволяет изменять коэффициент масштабирования карты.

В зависимости от высоты карты элемент будет иметь разное представление:
  • полное – с кнопками изменения масштаба и ползунком;
  • компактное – только с двумя кнопками (см. рисунок слева).

Подробнее про адаптивность.

Пример добавления ползунка масштаба:

var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        controls: ['zoomControl'],
        zoom: 12
    });
Скопировано

Линейка

Класс control.rulerControl.

Позволяет измерить расстояние между выбранными точками.

Чтобы измерить расстояние, нужно нажать на кнопку линейки и кликнуть на карте в нужных точках.

Ниже приведен пример добавления линейки на карту.

// Добавим кнопку измерения расстояний.
var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        controls: ['rulerControl'],
        zoom: 8
    });
Скопировано

Кнопка

Класс control.Button.

Кнопка со стандартным внешним видом.

Поддерживается два типа реакций на нажатие кнопки: после нажатия кнопка остается нажатой (поведение по умолчанию) или возвращается в исходное состояние. Тип реакции на нажатие задается опцией selectOnClick (true/false).

При нажатии на кнопку всегда генерируется событие click. Для кнопок, запоминающих свое состояние после нажатия, дополнительно генерируется событие select или deselect (в зависимости от того, в каком состоянии кнопка находилась в момент нажатия).

Для кнопки можно задавать собственную иконку (с помощью опции image), а также полностью изменить макет оформления.

var myButton =
  new ymaps.control.Button(
    '<b>Я кнопка</b>'
  );
myButton.events
  .add(
    'press',
    function () {
      alert('Щелк');
    }
  )
  .add(
    'select',
    function () {
      alert('Нажата');
    }
  )
  .add(
    'deselect',
    function () {
      alert('Отжата');
    }
  );
myMap.controls.add(myButton, {
  float: "left"
});
myMap.controls.add(
  new ymaps.control.Button({
    data: {
      content: "кнопка с иконкой",
      image: "ya.png"
    },
    options: {
      maxWidth: 150
    }
  }
));
Скопировано
Открыть примеры в песочнице

API предоставляет внешний модуль, который позволяет задать кнопкам круглое оформление. Модуль позволяет задать круглый вид как для стандартных, так и для собственных элементов управления.

Выпадающий список

Классы: control.ListBox и control.ListBoxItem.

Позволяет отобразить элемент управления в виде раскрывающегося меню.

Ниже приведен пример добавления на карту выпадающего списка.

var listItems = [
      new ymaps.control.ListBoxItem('Москва'),
      new ymaps.control.ListBoxItem('Новосибирск'),
      new ymaps.control.ListBoxItem('Нью-Йорк')
    ],

    myListBox = new ymaps.control.ListBox({
      data: {
        content: 'Выбрать город'
      },
      items: listItems
    });

myMap.controls.add(myListBox);
Скопировано

Взаимодействие выпадающего меню с картой необходимо запрограммировать самостоятельно. В примере показано, как настроить центрирование карты по выбранному элементу из списка.