18 января 2019

Загвоздка заключается в том, что когда начинаешь прокручивать страницу в браузере, и курсор попадает на саму карту, то прокрутка останавливается а сама карта начинает либо зуммиться, либо двигаться. Такая же проблема замечена на мобильных устройствах, когда при свайпе прокручивается уже не контент страницы, а сама Яндекс карта.

Такое свойство не всегда удобно и чаще всего приводит к неудобствам: мы хотим прокрутить страницу еще ниже, но мотается только карта, а сам сайт стоит на месте. И особенно это не удобно, когда карта растянута на всю ширину окна браузера. Конечно можно добавлять маленькие отступы слева и справа от карты. Но это не очень выглядит красиво, да и транжирить место на экране не стоит.

Здесь мы вкратце поясним, как отключить прокрутку и масштабирование на Яндекс картах: 

При создании своей карты сервис Yandex maps выдает нам код, похожий на этот:

<script type="text/j-avascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A9e5f6e66ccb3cf43325cb6cfb7642a430ab5ad9039a1573eb27d3b2fb58be6ac&amp;width=100%25&amp;height=472&amp;lang=ru_UA&amp;scroll=true"></script>

Нам же достаточно добавить в этот код следующее: myMap.behaviors.disable('scrollZoom');

То есть должно получиться следующее:

<script type="text/j-avascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A9e5f6e66ccb3cf43325cb6cfb7642a430ab5ad9039a1573eb27d3b2fb58be6ac&width=100%25&height=472&lang=ru_UA&scroll=true myMap.behaviors.disable('scrollZoom');">

Итак, что мы получаем:

Обычную прокрутку вниз и вверх страницы колесиком мыши либо свайпом. А при нажатии и удержаннии и протягивании по карте - двигаем самой картой. Чтобы увеличить\уменьшить масштаб, на карте имеются иконки +-

 
Добавить комментарий





Практически весь контент размещенный на сайте, вся информация является продуктом студии WSI. Если материалы взяты с других ресурсов, то обязательно указана ссылка на эти ресурсы. Вы можете бесплатно пользоваться информацией с нашего сайта, размещать ее на своих сайтах, но так же обязательна ссылка на наш сайт, Web-Sputnik.Info.


Меню
Копирайт © 2020 'Tochcha' Все права защищены