3

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');
}
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<div id="map"></div>

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

3
  • 1
    jsfiddle.net/Lfxba6h5
    – soledar10
    24 сен 2015 в 8:32
  • @soledar10, а почему в ответ не выложите?
    – Visman
    24 сен 2015 в 9:09
  • @Visman оказывается так не работает (сразу не проверил), поэтому вопрос снова открыт
    – Вася
    29 сен 2015 в 13:17

5 ответов 5

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');
}
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%;
}
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<div id="map"></div>

1
  • так не работает ведь! behaviors: ["drag", "dblClickZoom", "rightMouseButtonMagnifier", "multiTouch"] достаточно перейти по фидлу, открыть режим разработчика, выбрать смартфон и карта по-прежнему будет скроллиться!
    – Вася
    29 сен 2015 в 13:16
1

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

2
  • Там с помощью несложного скрипта и дива-обёртки данная проблема решается в несколько строк кода - не так много для перенеса в прямо в ответ. Только сылка на ваш блог в ответе может быть разцененена как спам, и тогда он будет удален.
    – 0xdb
    9 окт 2019 в 8:19
  • Да, с удовольствием. Дополнил описание. 10 окт 2019 в 14:26
0

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

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

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

1
  • 1
    Через javascript вы можете узнать и размеры монитора, и, например, useragent браузера, по которому с достаточной точностью можно определить мобильное устройство. Или поищите в интернете способы определения мобильного через javascript. P.S. Сюда же можно медиа запросы из css подключить.
    – Visman
    29 сен 2015 в 16:21
0

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

Пример:

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/ ... ;scroll=false"></script>
1
  • через конструктор - это очень упрощенно, т.к. очень ограничен нужный функционал
    – Вася
    16 авг 2017 в 13:05

Ваш ответ

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

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