Контекстное меню

Класс YMapContextMenu

YMapContextMenu используется для создания контекстного меню на карте. Позволяет создавать настраиваемые меню с пунктами действий при клике правой кнопкой мыши на карте.

Примечание

Данный класс является компонентом пакета @yandex/ymaps3-context-menu и предоставляет дополнительную функциональность в JS API, которая не входит в основное API.

Для подключения пакета воспользуйтесь инструкцией.

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

Создание и добавление меню:

const contextMenu = new YMapContextMenu({
  visible: false,
  screenCoordinates: [0, 0],
  position: 'bottom right',
  width: 240
});
map.addChild(contextMenu);

Работа с пунктами меню:

contextMenu.addChild(new YMapContextMenuItem({
  text: 'Название пункта',
  visible: true,
  onClick: () => {
  // обработчик клика
contextMenu.update({visible: false});
}
}));

<YMapContextMenu visible={true} screenCoordinates={[0, 0]} position="bottom right">
<YMapContextMenuItem
  text="Название пункта"
  visible={true}
  order={1}
  onClick={() => {
    // обработчик клика
    console.log('on item click!')
  }}
/>
</YMapContextMenu>

<YMapContextMenu :visible="true" :screenCoordinates="[0, 0]" position="bottom right">
<YMapContextMenuItem
  text="Название пункта"
  :visible="true"
  :order="1"
  :onClick="() => {
    // обработчик клика
    console.log('on item click!')
  }"
/>
</YMapContextMenu>

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

Конструктор

new YMapContextMenu(props: YMapContextMenuProps)

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

Параметр

Тип

Описание

props

YMapContextMenu

Значение входных props.
Унаследовано от

YMapGroupEntity.constructor

Props

export interface YMapContextMenuProps {
    /** Показывает или скрывает контекстное меню. */
    visible: boolean;
    /** Координаты экрана, где должно появиться контекстное меню. */
    screenCoordinates: [number, number];
    /** Ширина контекстного меню в пикселях. (по умолчанию "240px"). */
    width?: number;
    /** Положение контекстного меню относительно указателя. (по умолчанию "внизу справа"). */
    position?: Position;
}

Параметры

Параметр

Тип

Значение по умолчанию

Описание

visible

boolean

Показывает или скрывает контекстное меню.

screenCoordinates

[number, number]

Координаты экрана, где должно появиться контекстное меню.

width

number

240

Ширина контекстного меню в пикселях.

position

Position

bottom right

Положение контекстного меню относительно указателя.

Методы

_onAttach

_onAttach(): void

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

void

Переопределяет

YMapGroupEntity.__onAttach

_onUpdate

_onUpdate(): void

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

void

Переопределяет

YMapGroupEntity._onUpdate

_onDetach

_onDetach(): void

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

void

Переопределяет

YMapGroupEntity._onDetach

Класс YMapContextMenuItem

YMapContextMenuItem отвечает за создание отдельных пунктов контекстного меню на карте.

Примечание

Данный класс является компонентом пакета @yandex/ymaps3-context-menu и предоставляет дополнительную функциональность в JS API, которая не входит в основное API.

Для подключения пакета воспользуйтесь инструкцией.

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

Создание и добавление меню:

const contextMenu = new YMapContextMenu({
  visible: false,
  screenCoordinates: [0, 0],
  position: 'bottom right',
  width: 240
});
map.addChild(contextMenu);

Работа с пунктами меню:

contextMenu.addChild(new YMapContextMenuItem({
  text: 'Название пункта',
  visible: true,
  onClick: () => {
  // обработчик клика
contextMenu.update({visible: false});
}
}));

<YMapContextMenu visible={true} screenCoordinates={[0, 0]} position="bottom right">
<YMapContextMenuItem
  text="Название пункта"
  visible={true}
  order={1}
  onClick={() => {
    // обработчик клика
    console.log('on item click!')
  }}
/>
</YMapContextMenu>

<YMapContextMenu :visible="true" :screenCoordinates="[0, 0]" position="bottom right">
<YMapContextMenuItem
  text="Название пункта"
  :visible="true"
  :order="1"
  :onClick="() => {
    // обработчик клика
    console.log('on item click!')
  }"
/>
</YMapContextMenu>

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

Конструктор

new YMapContextMenuItem(props: YMapContextMenuItemProps)

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

Параметр

Тип

Описание

props

YMapContextMenuItem

Значение входных props.
Унаследовано от

YMapGroupEntity.constructor

Props

export interface YMapContextMenuItemProps {
    /** Показывает или скрывает пункт контекстного меню. */
    visible: boolean;
    /** Текст пункта меню. */
    text: string;
    /** Ссылка на значок или HTML-элемент со значком для пункта меню (необязательно). */
    icon?: string | HTMLElement;
    /** Расположение значка. (по умолчанию "start"). */
    iconPosition?: 'start' | 'end';
    /** Функция обратного вызова для обработки щелчка по пункту меню. */
    onClick: () => void;
    /** Флажок, указывающий, отключен ли пункт меню. (по умолчанию "false"). */
    disabled?: boolean;
    /** Устанавливает порядок расположения пунктов меню в списке.(по умолчанию "0"). */
    order?: number;
}

Параметры

Параметр

Тип

Значение по умолчанию

Описание

visible

boolean

Показывает или скрывает пункт контекстного меню.

text

string

Текст пункта меню.

icon

string or HTMLElement

Ссылка на значок или HTML-элемент со значком для пункта меню (необязательно).

iconPosition

'start' or 'end'

start

Расположение значка.

onClick

function

Функция обратного вызова для обработки щелчка по пункту меню.

disabled

boolean

false

Флажок, указывающий, отключен ли пункт меню.

order

number

0

Устанавливает порядок расположения пунктов меню в списке.

Методы

_onAttach

_onAttach(): void

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

void

Переопределяет

YMapGroupEntity.__onAttach

_onUpdate

_onUpdate(): void

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

void

Переопределяет

YMapGroupEntity._onUpdate

_onDetach

_onDetach(): void

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

void

Переопределяет

YMapGroupEntity._onDetach

Предыдущая
YMapMiniMap
Следующая
YMapDrawerControl