Клуб API Карт

Тач события и реакция на них карты.

bystrov1984
19 февраля 2013, 01:59

Здравствуйте.


Помогите пожалуйста решить проблему с картами и тач интерфейсом

 

1. Схема  touchstart - mouseenter, mousemove, mousedown. События срабатываю с задержками или одновременно ? 

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

3. Как вручную включить тач интерфейс не прибегая к посторонним юзер-агентам. Есть ли такая возможность. Почему это до сих пор не реализовано ? 

4. API которое получит браузер с юзерагентом Айпада и планшета на win8 чем то отличаются ? Или это просто сработает включение тача ? 

 

Ну и небольшое лирическое отступление. 

 Изначально Вы планировали, что интерфейс будет работать одинаково во всех браузерах и мобильных и десктопных и тач. Это в прошлом ? Был сильно разочарован, когда открыл карты через Safari на iphone 4. Просто зашел на yandex карты из поиска. В тоже время карты гугла в том же браузере работают великолепно. И мультитач корректно зумирует и скорость и отзывчивость интерфейса на уровне. 

 

 

18 комментариев
Подписаться на комментарии к посту
1. События срабатывают строго в одном потоке друг за другом.
2. Слушать собственно touchstart
3. Никак. Зачем?
4. Отличаются весьма существенно, в IE10 собственная система работы с touch-событиями.

Интерфейс одинаков во всех браузерах, включая Safari Mobile и IE10. Не путайте maps.yandex.ru и API Карт, это разные продукты.

А можно увидеть пример ? Мне не удалось заставить метки и кластеры слушать touchstart, возможно это событие не доходит непосредственно до метки или кластера ?

Опишите подробнее, что вы пытаетесь сделать.

Я создал метку , вешаю на неё прослушивание события, видимо неправильно

geoObject.events.add('touchstart',function (event) {

                    preventDefault();

                    stopPropagation();

                    stopImmediatePropagation();

                    geoObject.events.fire('click',new ymaps.Event());

                });

А зачем вы это делаете и чего вы хотите добиться?

Проблема в том что метки и кластеры плохо реагируют на касание, подозреваю что это из-за цепочки событий, которые запускаются после получения touchstart меткой. Нужно чтобы при касании к экрану открывался балун, а не после того как пользователь уберёт палец, как это сделано у Вас по умолчанию

Как я понял, что метки плохо реагируют ? Я создал контролы - обычные кнопки и повесил на них touchstart. В этом случае всё великолепно работает, контролы срабатывают чётко, но когда я касаюсь метки - срабатывает только один раз через 5 попыток. И такая беда только в хроме почему-то. 

И ещё заметил , если пользователь не очень быстрый, т.е задерживает немного палец, то метка вообще не открывается, даже тогда, когда палец убрали, хотя по идее - это должно симулировать mousedown ? как будто где-то есть таймаут срабатывания

В Хроме? Что за хром под iphone?

хром под Win8 с юзерагентом от андроид хрома нексус. Другого способа заставить тач заработать я не нашел

Под Хром / Вин8 мы ещё не тестили :)

Довольно странно, что срабатывает через 5 попыток, потому что метки вообще не получают событие touchstart и не прокидывают их на себе - так сейчас устроена архитектура.

Мы подумаем над этой проблемой и в будущих релизах научим метки работать с различными нестандартными для нас событиями.

Пока что могу посоветовать следующее - в тачевой версии вашего сайта открывать балун по mouseenter на кластере. Этот вариант будет работать как вам хочется - балун откроется сразу после того, как человек поставит палец на экран.

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

$(pm.getOverlay().getLayout().getParentElement()).bind('touchstart')
А чем вас не устраивает поведение наших меток?

Попробуйте сами, сработает ли метка, если будете нажимать медленно

Не совсем понятно в чём тут смысл. 

$(pm.getOverlay().getLayout().getParentElement()).bind('touchstart') 

метки и так слушают 'touchstart' . Но проблема в том что после появления события они не срабатывают, а запускают цепочку других событий. Как эта строчка это изменит ? Тут магия ? Я не силён в JS к сожалению. 

$(pm.getOverlay().getLayout().getParentElement()).bind('touchstart', function () {
// do something, например pm.balloon.open();
})

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

можно выставить preventBalloonOpenOnClick: true на всякий случай.