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

Question

[saveTibet]

Получил задачу перерисовать карту, которая занимает всю ширину футера, из-за того, что когда на мобильном устройстве юзер доскролливает до карты, невозможно сккроллить обратно, потому что двигается сама карта, а не страница.
Вопрос первый — как решить конкретно эту проблему? Карты от Яндекса.
Вопрос второй — а правильно ли вообще в мобильной версии втыкать прямо вот карту, а не сделать, скажем, ссылку, тыкая на которую открывалось бы нативное приложение?

Answer 1

[Павел]

У api карт есть специальные параметры для этого:

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

https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/refe...

Answer 2

[dom1n1k]

В качестве далеко не идеального, но очень простого костыля:

#map {
    max-height: 90vh;
}

Comments

[saveTibet]

не очень понял, к чему это приведет

[dom1n1k]

Карта никогда не будет занимать весь экран, всегда будет виден кусочек страницы, за который можно уцепиться пальцем.

[saveTibet]

dom1n1k: нет, сомнительное решение. не элегантное.

[dom1n1k]

Боюсь, что элегантного решения тут нет вовсе. Либо так, либо отключать тачевые взаимодействия с картой (во всяком случае, их часть) - но второе, кмк, ещё хуже. Тогда уж проще карту тупо скриншотом воткнуть, да и всё.

Answer 3

[niknametut]

1. Прикреплять заголовок (другую часть), чтобы не прокручивался и всегда можно было выйти.
2. Реализовывать карту на отдельной странице. На мобильном и так немного места, чтобы еще "до карты прокручивать"
Пример
viuga.ru/calcoaldelivery.html

Answer 4

[Fortop]

Жесты с двумя точками касания на скроллинг карты, жесты с одной точкой касания на скроллинг сайта.

И гугл по-моему это уже внедрил.

Comments

[saveTibet]

как то неочевидно, мне кажется. мало кто догадается двумя палками карту двигать.

Answer 5

[entermix]

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

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

<script type="text/javascript">
    myMap.behaviors.disable('scrollZoom');
</script>

Answer 6

[iBird Rose]

padding: 0 30px; на мобильных экранах для блока с картой.

Comments

[saveTibet]

тоже неочевидно. хорошо, если кто догадается...