#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, таким образом скролл (масштабирование) будет отключено. Пример:
