Skip to content

YandexMap

Это - основной компонент, от которого идут все остальные.

Учтите: карта не работает без указания дополнительных слоёв, отвечающих за её работу.

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

Конфигурация по умолчанию

См. пример базовой конфигурации YandexMap в разделе Быстрый старт.

Параметры

v-model

Может быть null или Object. Возвращает инстанс карты.

Хранить необходимо только в shallowRef.

typescript
const map = shallowRef<null | YMap>(null); //map передать в v-model

settings

Реактивный объект настроек. Поддерживается всё, кроме projection - его нужно передавать как компонент.

Принимает обязательный параметр location, в котором вы должны указать начальное состояние карты, а также остальные параметры карты (YMapProps).

См. документацию на сайте Яндекса.

Примечание

Параметры settings не синхронизируются автоматически с Картами - они работают только на "вход".

Многие параметры, такие как текущее расположение пользователя (center), вы можете получить из map (shallowRef, полученный в v-model).

Совет

А ещё, тут вы можете указать тёмную тему для карты!

Достаточно указать в settings theme: 'dark'.

tag

Тэг карты. По умолчанию: div

width

Ширина карты. По умолчанию: 100%

height

Высота карты. По умолчанию: 100%

zIndex (z-index)

По умолчанию Яндекс сам не задаёт z-index для контейнера, поэтому элементы внутри карты могут перекрывать элементы вашего сайта. Данный параметр сделан для удобства разработчика.

Параметр является числом, по умолчанию 0.

cursorGrab (cursor-grab)

Добавляет cursor grab/grabbing на слой схемы карты. grabbing будет активироваться только тогда, когда пользователь начнёт движение курсором.

readonlySettings (readonly-settings)

Отключает слежение за объектом настроек. Включите, если вам по каким-то причинам мешает реактивность settings.

realSettingsLocation (real-settings-location)

По умолчанию при изменении объекта settings в location, если он не изменился с прошлого раза, никаких действий выполнено не будет. Это сделано для того, чтобы вы могли менять любые другие настройки, при этом не откидывая пользователя на начальную позицию.

Однако, если вы не изменяете другие параметры, но хотели бы удобнее возвращать пользователя на начальную позицию, вы можете передать props real-location-settings. При любом триггере settings (вы можете его вызвать повторным присваиванием location в ваш .value, или использовать метод triggerRef) в zoom, а также center или bounds будет подставляться настоящие масштабирование и геолокация пользователя, после чего произойдет изменение.

Внимание

При использовании данного параметра локация пользователя будет изменяться на каждое обновление settings - при условии, что пользователь что-то делал, конечно.

В случае, если вам нужно и менять параметры в settings, и возвращать пользователя на начальную позицию, вы можете пользоваться встроенным методом map.setLocation (или map.value?.setLocation в setup, где map - shallowRef из v-model).

layers

Не-реактивный массив со слоями. После указания настроек изменение этого объекта не будет давать никакого эффекта.

Задавать слои рекомендуется через template, а после создания компонента - через addChild к инстансу карты.

См. документацию на сайте Яндекса.

Сделано с ♥ под лицензией MIT.