Przycisk przewijania MapBox na dotknięcie

Question

Próbuję zaimplementować MapBox na układzie, który wypełnia 100% strony. Wyłączyłem opcje powiększania mapy, ale problemy pojawiają się podczas próby przewijania na urządzeniach dotykowych, w których mapa wypełnia obszar podglądu. Czy mogę to zmienić, czy też przeglądarka traktuje je jak obraz?

Answer 1

Przykład ten został poprawiony: linia, której brakowało to:

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

To zapobiegnie mapę od zabijania zdarzenia kranu na urządzeniach dotykowych.

Answer 2

Usuń resztę odbiorców as in this example - ta, którą prawdopodobnie nadal masz, to dragging.

Answer 3

Tak, można zatrzymać słuchaczy Mapbox uniemożliwiania działań domyślnych ustawień funkcji ulotki robić nic:

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

Aby usunąć obrys umieszczonego wokół elementu przez przeglądarkę, które w przeciwnym razie zostałyby zapobiec, możesz dodać:

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

Pozwoliło to na przewijanie na urządzeniach dotykowych, chociaż testowałem tylko na Androidzie. Zauważ, że może to mieć inne konsekwencje dla twojej aplikacji - prawdopodobnie można temu zapobiec wchodząc do mapbox.js i usuwając to połączenie tylko z potrzebnych słuchaczy.

Answer 4

Dla tych, którzy chcą się dynamicznie włączyć/wyłączyć mapa skrzynki przewijanie/powiększanie itp zależności od rozmiaru strony (jak ja), można spróbować:

$(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(); 
    } 
} 

Wymień 768 o odpowiedniej liczby magiczne dla swojego układu. Zakłada jQuery.

Answer 5

spróbuj dodać

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

Answer 6

Problem z parametrem w mapbox dragging jest to, że kontroluje zarówno click-and-hold przeciąganie myszy lub innego urządzenia wskazującego i swiping ruchu oporu przy użyciu dotyku. Nie jestem pewien, czy jakakolwiek inna odpowiedź wyjaśnia to jako główny problem.

Sercem problemu, o którym myślę, że OP polega na tym, że wszyscy lubimy klikać i uważać, że jest łatwy w użyciu, ale nie podoba nam się przeciąganie, ponieważ przeszkadza w przewiń całą stronę.

To jest linia kodu, który wykorzystałem. To zależy od Modernizr i jQuery, ale możesz napisać coś podobnego bez nich, gdybyś tego potrzebował.

// disable dragging the map on touch devices only 
if ($('html').hasClass('touch')) map.dragging.disable();