Изменение поведений карты

Template

<yandex-map
    :cursor-grab="enabledBehaviors.includes('drag')"
    :height="height"
    :settings="{
        location: {
            center,
            zoom,
        },
        theme,
        showScaleInCopyrights: true,
        behaviors: enabledBehaviors,
    }"
    :width="width"
>
    <yandex-map-default-scheme-layer/>
    <yandex-map-controls :settings="{ position: 'right top', orientation: 'vertical' }">
        <yandex-map-control>
            <div class="behaviors">
                <label
                    v-for="(_, behavior) in allBehaviors"
                    :key="behavior"
                >
                    <input
                        :checked="enabledBehaviors.includes(behavior)"
                        type="checkbox"
                        @input="!enabledBehaviors.includes(behavior) ? enabledBehaviors.push(behavior) : enabledBehaviors = enabledBehaviors.filter(x => x !== behavior)"
                    >
                    {{ behavior }}
                </label>
            </div>
        </yandex-map-control>
        <yandex-map-control>
            <div class="behaviors">
                Для проверки работы mouseRoute/mouseTilt, удерживайте CTRL+ЛКМ по карте
            </div>
        </yandex-map-control>
    </yandex-map-controls>
</yandex-map>

Setup

import { ref } from 'vue';
import { YandexMap, YandexMapControl, YandexMapControls, YandexMapDefaultSchemeLayer } from 'vue-yandex-maps';
import type { BehaviorType } from '@yandex/ymaps3-types';

// Аналогично включены по умолчанию в самой Яндекс Карте
const enabledBehaviors = ref<BehaviorType[]>(['drag', 'scrollZoom', 'pinchZoom', 'dblClick']);

const allBehaviors: Record<BehaviorType, true> = {
    dblClick: true,
    drag: true,
    scrollZoom: true,
    mouseRotate: true,
    mouseTilt: true,
    magnifier: true,
    oneFingerZoom: true,
    panTilt: true,
    pinchRotate: true,
    pinchZoom: true,
};

Style

<style scoped>
.behaviors {
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 14px;
}
</style>