MapBox Scrollseite bei Berührung

Question

Ich versuche MapBox auf einem Layout zu implementieren, das 100% der Seite ausfüllt. Ich habe die Kartenzoomoptionen deaktiviert, aber die Probleme treten auf, wenn versucht wird, auf Touch-Geräten zu scrollen, wenn die Karte das Ansichtsfenster ausfüllt. Kann ich das überschreiben oder den Browser wie ein Bild behandeln lassen?

Answer 1

Dieses Beispiel wurde verbessert: die Linie, ist fehlte:

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

Dies wird die Karte von der Tötung tap Ereignisse auf Touch-Geräten verhindern.

Answer 2

Entfernen Sie den Rest der Listener as in this example - die, die Sie wahrscheinlich noch haben, ist dragging.

Answer 3

Ja, können Sie die MapBox Zuhörer verhindert Standardaktionen stoppen, indem die Flügelfunktion Einstellung nichts zu tun:

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

den Umriss um das Element durch den Browser platziert zu entfernen, die sonst verhindert worden wäre, Sie können hinzufügen:

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

Dies erlaubt Scrollen auf Touch-Geräten für mich, obwohl ich nur auf Android getestet habe. Beachten Sie, dass dies andere Auswirkungen auf Ihre Anwendung haben kann - diese könnten möglicherweise verhindert werden, indem Sie mapbox.js aufrufen und diesen Aufruf nur von den Listenern entfernen, die Sie benötigen.

Answer 4

Für jene, die dynamisch möchten aktivieren/deaktivieren Karte Feld Scrollen/Zoomen usw. je nach Seitengröße (wie ich), können Sie versuchen:

$(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 Ersetzen durch die entsprechende magische Zahl für Ihr Layout. Nimmt jQuery an.

Answer 5

try

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

Answer 6

Das Problem mit den dragging Parametern in MapBox Zugabe ist, dass es steuert sowohl die Click-and-hold mit einer Maus oder einem anderen Zeigegerät und der streichende Bewegung drag touch ziehen. Nicht sicher, dass eine der anderen Antworten dies als das Hauptproblem erklärt. Das Herz des Problems, von dem ich denke, dass das OP daraus besteht, ist, dass wir alle das Klick-Ziehen mögen und denken, es ist einfach zu benutzen, aber wir mögen das Touch-Dragging nicht, weil es die Fähigkeit stört scrollen Sie die gesamte Seite.

Dies ist die Codezeile, die ich verwendet habe. Es hängt von Modernizr und jQuery ab, aber Sie könnten etwas ähnliches ohne sie schreiben, wenn Sie es brauchen.

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