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

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

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

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

Геолокация

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

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.TrafficControl

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

В зависимости от размеров карты элемент будет иметь разное представление:

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

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

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

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

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

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

var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64],
        controls: ['typeSelector'],
        zoom: 12
    });

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

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

var myMap = new ymaps.Map('map', {
        center: [55.76, 37.64],
        controls: ['fullscreenControl'],
        zoom: 12
    });

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

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

var myMap = new ymaps.Map('map', {
        center: [59.937, 30.313],
        controls: ['zoomControl'],
        zoom: 12
    });

Линейка

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

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

Кнопка

Поддерживается два типа реакций на нажатие кнопки: после нажатия кнопка остается нажатой (поведение по умолчанию) или возвращается в исходное состояние. Тип реакции на нажатие задается опцией 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 предоставляет внешний модуль, который позволяет задать кнопкам круглое оформление. Модуль позволяет задать круглый вид как для стандартных, так и для собственных элементов управления.

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

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

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);

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