Элементы управления

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

Визуальные элементы

Визуальные элементы — это кнопки и другие графические элементы, с помощью которых пользователи могут выполнять действия с картой. Например, изменять масштаб, настраивать маршруты и др. Как правило, визуальные элементы размещаются в области показа карты и имеют фиксированное положение (пользователи не могут их двигать).

В библиотеке визуальные элементы представлены классами с постфиксом Control, например YMapZoomControl, YMapGeolocationControl, которые поставляются из отдельного пакета https://www.npmjs.com/package/@yandex/ymaps3-default-ui-theme.

Они строятся на базе более низкоуровневых элементов, таких как YMapControl, YMapControlButton.

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

Позиционирование

Позиция элементов задается при помощи следующих директив:

  • left
  • right
  • bottom
  • top

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

№

Пример

Значение

1

top

Расположить элементы наверху в горизонтальную линию.

2

right

Расположить элементы справа в вертикальную линию.

3

top left

Расположить элементы наверху в левом углу (ориентация задаётся отдельно).

4

right bottom

Расположить элементы внизу в правом углу (ориентация задаётся отдельно).

Ориентация

Ориентация элементов задается при помощи следующих директив:

  • horizontal
  • vertical

Ориентация может как выводиться из позиции:

  • horizontal для top и bottom
  • vertical для left и right

так и задаваться отдельно (для всех остальных вариантов позиционирования). По умоланию horizontal.

Поведения

Помимо визуальных элементов управления у карты также есть набор поведений: реакция на колесо мыши,
перетаскивание карты левой кнопкой мыши и т.д. Он задается через поле behaviors карты.

const map = new YMap(element, {
  location: {center: [37.588144, 55.733842], zoom: 14},
  behaviors: ['drag', 'pinchZoom', 'mouseTilt']
});

Полный список доступных поведений смотри в разделе BehaviorMapEventHandler.

Предыдущая
YMapListener
Следующая
YMapControl