alekseyruzov
@alekseyruzov
UI

Как вы реализуете карты на мобильной версии сайта?

Получил задачу перерисовать карту, которая занимает всю ширину футера, из-за того, что когда на мобильном устройстве юзер доскролливает до карты, невозможно сккроллить обратно, потому что двигается сама карта, а не страница.
Вопрос первый — как решить конкретно эту проблему? Карты от Яндекса.
Вопрос второй — а правильно ли вообще в мобильной версии втыкать прямо вот карту, а не сделать, скажем, ссылку, тыкая на которую открывалось бы нативное приложение?
  • Вопрос задан
  • 1735 просмотров
Решения вопроса 1
PavelMonro
@PavelMonro
У api карт есть специальные параметры для этого:
map.behaviors.disable('multiTouch');
map.behaviors.disable('drag');
map.behaviors.disable('scrollZoom')

https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/refe...
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 5
dom1n1k
@dom1n1k
В качестве далеко не идеального, но очень простого костыля:
#map {
    max-height: 90vh;
}
Ответ написан
@niknametut
1. Прикреплять заголовок (другую часть), чтобы не прокручивался и всегда можно было выйти.
2. Реализовывать карту на отдельной странице. На мобильном и так немного места, чтобы еще "до карты прокручивать"
Пример
viuga.ru/calcoaldelivery.html
Ответ написан
Комментировать
@Fortop
Tech/Team lead
Жесты с двумя точками касания на скроллинг карты, жесты с одной точкой касания на скроллинг сайта.

И гугл по-моему это уже внедрил.
Ответ написан
@entermix
Вопрос первый — как решить конкретно эту проблему? Карты от Яндекса.

https://yandex.ru/blog/mapsapi/56129

<script type="text/javascript">
    myMap.behaviors.disable('scrollZoom');
</script>
Ответ написан
Комментировать
iiiBird
@iiiBird
Пока ты спишь - твой конкурент совершенствуется
padding: 0 30px; на мобильных экранах для блока с картой.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы