2013-08-06 5 views
6

Я пытаюсь реализовать MapBox на макет, который заполняет 100% страницы. Я отключил параметры масштабирования карты, но проблемы возникают при попытке прокрутки на сенсорных устройствах, где карта заполняет область просмотра. Могу ли я переопределить это или использовать браузер как изображение?MapBox прокрутка страницы при касании

ответ

2

Этот пример был усовершенствован: линия, которая хватает:

if (map.tap) map.tap.disable();

Это предотвратит карту от убийства крана событий на сенсорных устройствах.

+0

Это «отключает обработчик крана», как описано в [docs] (https://www.mapbox.com/mapbox.js/example/v1.0.0/disable-zooming-panning/) - не отключает перетаскивание карты на сенсорных устройствах OP спрашивает о – squarecandy

2

Удалить остальных слушателей as in this example - тот, который у вас, вероятно, еще есть, есть dragging.

4

Да, вы можете остановить слушатель MapBox от предотвращающих действий по умолчанию, установив функцию листовки не делать ничего:

L.DomEvent.preventDefault = function(e) {return;} 

Чтобы удалить контур, расположенный вокруг элемента с помощью браузера, в противном случае был бы предотвратить, вы можете добавить:

*:focus { 
    outline: none; 
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
} 

Это позволило прокрутить сенсорные устройства для меня, хотя я тестировал только на Android. Обратите внимание, что это может иметь другие последствия для вашего приложения - это, вероятно, можно предотвратить, перейдя в mapbox.js и удалив этот вызов только из тех слушателей, которые вам нужны.

+0

Отлично! Это отлично работает для меня, однако у другого пользователя iPad теперь есть проблемы с использованием значков всплывающих подсказок. Они не останутся открытыми, если я не добавлю событие alert() click. Я застрял на пути, чтобы исправить это. – devlondoner

+0

Это кажется чрезвычайно тяжелым. В основном вы полностью задействуете всю функциональность на карте. Существуют опции для управления каждым элементом, который вы, возможно, захотите отключить, оставив остальных работоспособными. – squarecandy

0

Для тех, кто хочет, чтобы динамически включить/отключить отображение окна прокрутки/масштабирование и т.д. в зависимости от размера страницы (как я), вы можете попробовать:

$(document).ready(function() { 
    $(window).on('resize', updateMap); 
}); 

function updateMap() { 
    var width = $(window).width(); 
    if (width < 768) { 
    map.scrollWheelZoom.disable(); 
    map.doubleClickZoom.disable(); 
    map.dragging.disable(); 
    if (map.tap) map.tap.disable(); 
    } 
    else { 
    map.scrollWheelZoom.enable(); 
    map.doubleClickZoom.enable(); 
    map.dragging.enable(); 
    if (map.tap) map.tap.enable(); 
    } 
} 

Заменить 768 соответствующим магическим числом для вашего макета. Предполагает jQuery.

1

попробуйте добавить

if (map.tap) map.dragging.disable(); 
0

Проблема с параметром dragging в MapBox является то, что он контролирует как щелчок и удерживать перетаскиванием с помощью мыши или другого указывающего устройства и пролистывание движение сопротивления с помощью прикосновения. Не уверен, что какие-либо другие ответы проясняют это как главную проблему.

Сердце проблемы, с которой я думаю, что OP работает, заключается в том, что мы все любим перетаскивание мышью и считаем, что это просто использовать, но нам не нравится прикосновение, поскольку оно мешает прокрутите всю страницу.

Это строка кода, в которой я закончил использование. Это зависит от Modernizr и jQuery, но вы могли бы написать что-то подобное без них, если вам нужно.

// disable dragging the map on touch devices only 
if ($('html').hasClass('touch')) map.dragging.disable(); 
Смежные вопросы