Как запретить масштабирование Яндекс.Карты при скролле только на мобильных устройствах?

#javascript #html #jquery #yandex_maps_api #мобильная_разработка

                    
Cкажем вот эта карта — Яндекс.Карты multiRoute.

Как запретить масштабирование карты на малых разрешениях (начиная с планшета), а
на стандартных разрешениях оставить? Чтобы при скролле пальцем не нужно было проматывать
всю карту для спуска вниз, но при этом можно было увеличивать/уменьшать масштаб с помощью +/-.

Вообще, решил так


function init() {
  var myMap = new ymaps.Map('map', {
    center: [55.76, 37.64],
    zoom: 10
  })
myMap.behaviors.disable('scrollZoom');
myMap.behaviors.disable('drag');
}






Но, вопрос остаётся: как отключить эту возможность только на мобильных устройствах,
а на desktop — оставить?
    

Ответы

Ответ 1

Вот здесь подробно об этом - map.behavior.Manager



function init() {
    var myMap = new ymaps.Map('map', {
            center: [55.76, 37.64],
            zoom: 10,
            behaviors: ["drag", "dblClickZoom", "rightMouseButtonMagnifier", "multiTouch"]
          
        }),
        /**
         * Создание мультимаршрута.
         * @param {Object} model Модель маршрута. Задается объектом с полями: referencePoints
и params.
         * referencePoints - описание опорных точек мультимаршрута (обязательное поле);
         * params - параметры мультимаршрута.
         * @param {Object} [options] Опции маршрута.
         * @see http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/multiRouter.MultiRoute.xml
         */


        multiRoute1 = new ymaps.multiRouter.MultiRoute({
            referencePoints: [
                "Москва, метро Речной вокзал",
                "Москва, метро Водный стадион",
            ]
        }, {
            // Радиус транзитных точек на маршруте.
            viaPointIconRadius: 10,
            // Радиус точечных маркеров в путевых точках.
            pinIconRadius: 10,
            wayPointStartIconColor: "#80C257",
            wayPointFinishIconColor: "#8470FF",
            wayPointIconColor: "black",
            routeStrokeWidth: 2,
            routeActiveStrokeWidth: 6,
            routeStrokeColor: "000088",
            routeActiveStrokeColor: "#FF4500",
            pinIconFillColor: "#BFEFFF",
            viaPointIconFillColor: "#FFD39B",
            transportMarkerIconColor: "#FFE4E1"
        }),


        multiRoute2 = new ymaps.multiRouter.MultiRoute({
            referencePoints: [
                "Москва, метро Войковская",
                "Москва, метро Сокол"
            ]
        }, {
            routeStrokeWidth: 2,
            routeActiveStrokeWidth: 4,
            routeStrokeColor: "000088",
            routeActiveStrokeColor: "#66CDAA"
        }),

        buttonRoute1 = new ymaps.control.Button({
            data: {
                content: "Первый маршрут"
            },
            options: {
                maxWidth: 300
            }
        }),

        buttonRoute2 = new ymaps.control.Button({
            data: {
                content: "Второй маршрут"
            },
            options: {
                maxWidth: 300
            }
        });


    myMap.controls.add(buttonRoute2);
    myMap.controls.add(buttonRoute1);


    myMap.geoObjects.add(multiRoute1);
    myMap.geoObjects.add(multiRoute2);



    buttonRoute1.events.add('select', function () {
        if (buttonRoute2.isSelected()) {
            buttonRoute2.deselect();
        }
        myMap.setBounds(multiRoute1.getBounds());
    });


    buttonRoute2.events.add('select', function () {
        if (buttonRoute1.isSelected()) {
            buttonRoute1.deselect();
        }
        myMap.setBounds(multiRoute2.getBounds());
    });


multiRoute.model.events.add("requestsuccess", function () {
            var wayPoints = multiRoute1.getWayPoints();
            wayPoints.get(0).properties.set('name', 'текст'); //Для метро Речной Вокзал
        });


}

ymaps.ready(init);
body {
    height: 100%;
}
#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




Ответ 2

var isMobile = {
    Android: function() {return navigator.userAgent.match(/Android/i);},
    BlackBerry: function() {return navigator.userAgent.match(/BlackBerry/i);},
    iOS: function() {return navigator.userAgent.match(/iPhone|iPad|iPod/i);},
    Opera: function() {return navigator.userAgent.match(/Opera Mini/i);},
    Windows: function() {return navigator.userAgent.match(/IEMobile/i);},
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() ||
isMobile.Opera() || isMobile.Windows());
    }
};

// после вызова карты
if(isMobile.any()){
        myMap.behaviors.disable('scrollZoom');
        myMap.behaviors.disable('drag');
}


Ответ 3

В принципе, вот неплохая статья на эту тему. Там с помощью несложного скрипта и дива-обёртки
данная проблема решается в несколько строк кода: 
https://blog.lisogorsky.ru/ignor-scroll-iframe-maps
Если в двух словах, то: оборачиваем iframe в div с определённым классом, либо идентификатором.
Для iframe указываем через css свойство pointr-events со значением none. Затем по клику
на обёрточный div с помощью несложного JavaScript убираем свойство pointr-events


Ответ 4

Вообще, решил так

map.behaviors.disable('scrollZoom');
map.behaviors.disable('drag');


Но, вопрос остается: как отключить эту возможность только на мобильных устройствах,
а на десктоп оставить?


Ответ 5

Проще всего сгенерить карту через конструктор карт, и добавить флаг scroll=false,
таким образом скролл (масштабирование) будет отключено.

Пример: