YMapListener

Класс YMapListener — это компонент для обработки событий карты и ее дочерних элементов.

Например, YMapListener отвечает за подписку на события карты.

Инициализация слушателяИнициализация слушателя

const clickCallback = () => alert('О, событие!');
const mouseMoveCallback = () => console.log('Я двигаю мышью...');

// Создание объекта-слушателя.
const mapListener = new YMapListener({
  layer: 'any',
  // Добавление обработчиков на слушатель.
  onClick: clickCallback,
  onMouseMove: mouseMoveCallback
});

// Добавление слушателя на карту.
map.addChild(mapListener);

Подробный пример.

Интерфейс передаваемого обработчикаИнтерфейс передаваемого обработчика

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

• MapEventHandler
• DomEventHandler
• BehaviorMapEventHandler

MapEventHandlerMapEventHandler

Обработчик MapEventHandler служит для обработки событий карты.

Обработчик вызывается со следующими параметрами:

• для метода onUpdate:

  • type — update;
  • camera — объект камеры YMapCamera;
  • location — объект позиции карты YMapLocation;
  • mapInAction — флаг наличия карточной анимации на момент вызова обработчика;

Пример использования onUpdate:

const updateHandler = ({type, camera, location}) => {
  console.log(type, camera.tilt);

  console.log(location.zoom, location.center);
};

• для метода onResize:

  • type — resize;
  • size — размер контейнера карты в PixelCoordinates.
  • mapInAction — флаг наличия карточной анимации на момент вызова обработчика;

• для метода onStateChanged:

  • state - объект состояния карты YMapState;

const stateChangedHandler = (state) => {
  console.log(state.getLayerState(ymaps3.YMapDefaultSchemeLayer.defaultProps.source + ':ground', 'tile'));
};

Поддерживаемые событияПоддерживаемые события

• onUpdate — событие, срабатывающее при изменении состояния карты;
• onResize — событие, срабатывающее при изменении размера карты;
• onStateChanged — событие, срабатывающее при изменении состояния карты;

DomEventHandlerDomEventHandler

Обработчик DomEventHandler служит для обработки событий DOM.

Обработчик вызывается со следующими параметрами:

• object — Объект карты, на котором произошло событие. Содержит поля type и entity. В зависимости от type, entity может быть YMapFeatue, YMapMarker или YMapHotspot. Если нажатие было совершено не на объект карты, передается undefined;
• event — Событие карты. Содержит поля coordinates - географические координаты и screenCoordinates - экранные координаты места на карте, в котором произошло событие;

Пример использования:

const clickHandler = (object) => {
  if (object?.type === 'hotspot') {
    console.log('Clicked on hotspot!');
  }
};

// Создание нового слушателя.
const mapListener = new YMapListener({
  layer: 'any',
  onClick: clickHandler
});

// Обновление уже существующего слушателя.
mapListener.update({
  onClick: anotherClickHandler
});

// Обновление идентификатора, если необходимо
// или если значение не было передано при инициализации.
mapListener.update({
  layer: 'markers',
  onClick: clickHandler
});

Поддерживаемые событияПоддерживаемые события

• onTouchStart — событие, аналогичное нативному 'touchstart';
• onTouchMove — событие, аналогичное нативному 'touchmove';
• onTouchEnd — событие, аналогичное нативному 'touchend';
• onTouchCancel — событие, аналогичное нативному 'touchcancel';
• onPointerDown — событие, аналогичное нативному 'pointerdown';
• onPointerMove — событие, аналогичное нативному 'pointermove';
• onPointerUp — событие, аналогичное нативному 'pointerup';
• onPointerCancel — событие, аналогичное нативному 'pointercancel';
• onClick — событие, срабатывающее при нажатии левой кнопкой мыши после небольшой задержки (необходима, чтобы отличить клик от двойного клика);
• onDblClick — событие, срабатывающее при двойном нажатии левой кнопкой мыши;
• onFastClick — событие, аналогичное нативному 'click';
• onRightDblClick — событие, срабатывающее при двойном нажатии правой кнопкой мыши;
• onMouseDown — событие, аналогичное нативному 'mousestart';
• onMouseEnter — событие, аналогичное нативному 'mouseenter';
• onMouseLeave — событие, аналогичное нативному 'mouseleave';
• onMouseMove — событие, аналогичное нативному 'mousemove';
• onContextMenu — событие, аналогичное нативному 'contextmenu' после небольшой задержки (необходима, чтобы отличить клик от двойного клика).

BehaviorMapEventHandlerBehaviorMapEventHandler

Обработчик BehaviorMapEventHandler служит для разграничения типов событий поведения карты, с которыми можно работать в API Карт.

Обработчик вызывается с параметрами:

• type — типом поведения, которое произошло на карте;
• location — объект позиции карты YMapLocation;
• camera — объект камеры YMapCamera;

Пример использования:

const behaviorHandler = ({type}) => {
  if (type === 'pinchRotate') {
    console.log('Пользователь вращает карту жестами!');
  }
};

mapListener.update({onActionStart: behaviorHandler});

const behaviorStartHandler = ({type}) => {
  if (type === 'dblClick') {
    console.log('1. Started double click.');
  }
};

const behaviorEndHandler = ({type}) => {
  if (type === 'dblClick') {
    console.log('3. Finished double click.');
  }
};

const dblClickHandler = () => console.log('2. Double click.');

mapListener.update({
  onActionStart: behaviorStartHandler,
  onActionEnd: behaviorEndHandler,
  dblClick: dblClickHandler
});

Поддерживаемые событияПоддерживаемые события

• onActionStart — событие, срабатывающее при старте какого-либо действия, связанного с картой;
• onActionEnd — событие, срабатывающее после завершения какого-либо действия, связанного с картой.

Типы поведенийТипы поведений

• drag — перемещение карты мышью или жестом пальцев на тачскринах;
• pinchZoom — приближение/отдаление жестом (двумя пальцами);
• scrollZoom — приближение/отдаление колесом мыши;
• dblClick — двойное нажатие мыши;
• magnifier — выделение прямоугольной области карты зажатием правой кнопки мыши и приближение карты к выделенному прямоугольнику по следующему принципу: длина выделенного прямоугольника составляет 100% ширины видимой области контейнера карты после приближения;
• oneFingerZoom — приближение/отдаление одним пальцем;
• mouseRotate — поворот карты мышью;
• mouseTilt — наклон карты мышью;
• pinchRotate — поворот карты жестом;
• panTilt — наклон карты жестом.

КонструкторКонструктор

new YMapListener(props)

Параметры конструктораПараметры конструктора

Унаследовано отУнаследовано от

YMapEntity.constructor

PropsProps

YMapListenerProps: <a href="ref/#DomEventsProps">DomEventsProps</a> | <a href="ref/#NullablePartial">NullablePartial</a>&lt;<a href="ref/#MapEvents">MapEvents</a>&gt; | <a href="ref/#NullablePartial">NullablePartial</a>&lt;<a href="ref/#BehaviorEvents">BehaviorEvents</a>&gt;

МетодыМетоды

updateupdate

update(changedProps): void

Метод обновления параметров.

ПараметрыПараметры

ВозвращаетсяВозвращается

void

Унаследовано отУнаследовано от

YMapEntity.update