0

Подскажите пожалуйста, куда вставить код myMap.behaviors.disable('scrollZoom') для отмены скролла колесом мышки на Яндекс карте? И вопрос, при отмене скролла, будут ли работать кнопки "+" и "-" на самой карте? И еще вопрос, как разместить на этой карте собственную метку? Рисунок у меня для обеих карт один.

function init () {
    var myMap = new ymaps.Map('map', {
            center: [57.882900, 34.044254],
            zoom: 16,
            controls: ['smallMapDefaultSet']
        }),

        // Создадим собственный макет выпадающего списка.
        ListBoxLayout = ymaps.templateLayoutFactory.createClass(
            "<button id='my-listbox-header' class='btn btn-success dropdown-toggle' data-toggle='dropdown'>" +
                "{{data.title}} <span class='caret'></span>" +
            "</button>" +
            // Этот элемент будет служить контейнером для элементов списка.
            // В зависимости от того, свернут или развернут список, этот контейнер будет
            // скрываться или показываться вместе с дочерними элементами.
            "<ul id='my-listbox'" +
                " class='dropdown-menu' role='menu' aria-labelledby='dropdownMenu'" +
                " style='display: {% if state.expanded %}block{% else %}none{% endif %};'></ul>", {

            build: function() {
                // Вызываем метод build родительского класса перед выполнением
                // дополнительных действий.
                ListBoxLayout.superclass.build.call(this);

                this.childContainerElement = $('#my-listbox').get(0);
                // Генерируем специальное событие, оповещающее элемент управления
                // о смене контейнера дочерних элементов.
                this.events.fire('childcontainerchange', {
                    newChildContainerElement: this.childContainerElement,
                    oldChildContainerElement: null
                });
            },

            // Переопределяем интерфейсный метод, возвращающий ссылку на
            // контейнер дочерних элементов.
            getChildContainerElement: function () {
                return this.childContainerElement;
            },

            clear: function () {
                // Заставим элемент управления перед очисткой макета
                // откреплять дочерние элементы от родительского.
                // Это защитит нас от неожиданных ошибок,
                // связанных с уничтожением dom-элементов в ранних версиях ie.
                this.events.fire('childcontainerchange', {
                    newChildContainerElement: null,
                    oldChildContainerElement: this.childContainerElement
                });
                this.childContainerElement = null;
                // Вызываем метод clear родительского класса после выполнения
                // дополнительных действий.
                ListBoxLayout.superclass.clear.call(this);
            }
        }),

        // Также создадим макет для отдельного элемента списка.
        ListBoxItemLayout = ymaps.templateLayoutFactory.createClass(
            "<li><a>{{data.content}}</a></li>"
        ),

        // Создадим 2 пункта выпадающего списка
        listBoxItems = [
            new ymaps.control.ListBoxItem({
                data: {
                    content: 'Бологое',
                    center: [57.882900, 34.044254],
                    zoom: 16
                }
            }),
            new ymaps.control.ListBoxItem({
                data: {
                    content: 'ЗАТО "Озерный"',
                    center: [57.869905, 33.696121],
                    zoom: 16
                }
            }),
        ],

        // Теперь создадим список, содержащий 2 пункта.
        listBox = new ymaps.control.ListBox({
                items: listBoxItems,
                data: {
                    title: 'Выберите центр'
                },
                options: {
                    // С помощью опций можно задать как макет непосредственно для списка,
                    layout: ListBoxLayout,
                    // так и макет для дочерних элементов списка. Для задания опций дочерних
                    // элементов через родительский элемент необходимо добавлять префикс
                    // 'item' к названиям опций.
                    itemLayout: ListBoxItemLayout
                }
            });

        listBox.events.add('click', function (e) {
            // Получаем ссылку на объект, по которому кликнули.
            // События элементов списка пропагируются
            // и их можно слушать на родительском элементе.
            var item = e.get('target');
            // Клик на заголовке выпадающего списка обрабатывать не надо.
            if (item != listBox) {
                myMap.setCenter(
                    item.data.get('center'),
                    item.data.get('zoom')
                );
            }
        });

    myMap.controls.add(listBox, {float: 'left'});
}

2 ответа 2

3

Лучше все же для каждого вопроса создавать отдельный вопрос.

куда вставить код myMap.behaviors.disable('scrollZoom') для отмены скролла колесом мышки на Яндекс карте?

В любое место после создания карты, где доступна переменная myMap. Но лучше изначально это поведение не добавлять при создании карты (см. параметр state.behaviors в конструкторе карты ).

при отмене скролла, будут ли работать кнопки "+" и "-" на самой карте?

Да, это контрол работающий отдельно от поведения колесика мышки. Убрать его можно через myMap.controls.remove('zoomControl'). Но лучше, опять же, его вообще не добавлять на карту изначально (см. параметр state.controls в конструкторе карты).

И еще вопрос, как разместить на этой карте собственную метку?

Посмотрите пример.

2

Отключить поведение scrollZoom можно сразу после создания карты. В Вашем коде строку myMap.behaviors.disable('scrollZoom') можно добавить сразу после определения переменных (перед listBox.events.add(...)).

Пример отключения поведений есть в песочнице Яндекса.

Кнопки смены масштаба при этом продолжат работать, потому что Вы отключаете только поведение - масштабирование колесом мыши.

Метку с собственным изображением в качестве пина можно сделать, задав опции метки:

iconLayout: 'default#image',
iconImageHref: '<url изображения>'

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

3
  • Спасибо за ответ. Может еще не много сможете разъяснить по поводу размещения собственной метки на карте. Я с Яндекс картами вообще раньше не работал, и поэтому не совсем понимаю где указывать код.
    – Ballly
    6 дек 2017 в 17:06
  • listBoxItems = [ new ymaps.control.ListBoxItem({ data: { content: 'Бологое', center: [57.882900, 34.044254], zoom: 16 } }), new ymaps.control.ListBoxItem({ data: { content: 'ЗАТО "Озерный"', center: [57.869905, 33.696121], zoom: 16 } }), ],
    – Ballly
    6 дек 2017 в 17:07
  • Посмотрите пример по ссылке из моего ответа. Вам нужно скопировать код создания метки и добавления её на карту. Добавить его можно после создания карты, например, сразу после строки, которая отключает scrollZoom
    – Reni
    7 дек 2017 в 8:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.