Sto cercando di implementare MapBox su un layout che riempie il 100% della pagina. Ho disabilitato le opzioni di zoom della mappa, ma i problemi si verificano quando si prova a scorrere su dispositivi touch in cui la mappa riempie il viewport. Posso sovrascriverlo o far trattarlo dal browser come un'immagine?Pagina di scorrimento di MapBox al tocco
Questo esempio è stata migliorata: la linea che mancava è:
if (map.tap) map.tap.disable();
Questo consentirà di evitare la mappa di uccidere eventi tap su dispositivi touch.
Rimuovere il resto degli ascoltatori as in this example - quello che probabilmente ha ancora è dragging.
Sì, è possibile interrompere l'ascoltatori Mapbox da prevenire azioni predefinite impostando la funzione volantino di non fare nulla:
L.DomEvent.preventDefault = function(e) {return;}
Per rimuovere il contorno collocato attorno all'elemento dal browser che altrimenti sarebbe stato impedito, è possibile aggiungere:
*:focus {
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
}
Questo ha permesso lo scorrimento su dispositivi touch per me, anche se ho testato solo su Android. Tieni presente che questo potrebbe avere altre conseguenze sulla tua applicazione, che potrebbero essere probabilmente evitate andando in mapbox.js e rimuovendo questa chiamata solo dagli ascoltatori di cui hai bisogno.
Grande! Questo ha funzionato bene per me, ma un altro utente su iPad ora ha problemi a toccare le icone del tooltip. Non rimarranno aperti a meno che non aggiungo un evento di avviso(). Sono bloccato su un modo per risolvere questo problema. – devlondoner
Questo sembra estremamente pesante. In pratica, fai il pieno di tutte le funzionalità sulla mappa. Ci sono opzioni per controllare ogni elemento che potresti voler disabilitare lasciando operativi gli altri. – squarecandy
Per coloro che vogliono attivare in modo dinamico/disabilitare carta casella di scorrimento/zoom, ecc a seconda delle dimensioni della pagina (come ho fatto io) si può provare:
$(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();
}
}
Sostituire 768 con il numero magico appropriato per il layout. Presume jQuery.
prova ad aggiungere
if (map.tap) map.dragging.disable();
Il problema con il parametro dragging in mapbox è che controlla sia il click-and-hold trascinando con il mouse o altro dispositivo di puntamento e la strisciata del movimento di resistenza usando tatto. Non sono sicuro che nessuna delle altre risposte chiarisca questo come il problema principale.
Il cuore del problema a cui penso che l'OP sta arrivando è che a tutti piace il trascinamento del clic e pensiamo che sia facile da usare, ma non ci piace il trascinamento del tocco perché interferisce con la capacità di scorrere l'intera pagina.
Questa è la riga di codice che ho utilizzato. Dipende da Modernizr e jQuery, ma potresti scrivere qualcosa di simile senza di loro se ne avessi bisogno.
// disable dragging the map on touch devices only
if ($('html').hasClass('touch')) map.dragging.disable();
Questo "disabilita il gestore del tocco" come descritto nella [documenti] (https://www.mapbox.com/mapbox.js/example/v1.0.0/disable-zooming-panning/) - non disabilita il trascinamento della mappa sui dispositivi touch di cui l'OP chiede informazioni – squarecandy