Estoy tratando de solucionar el problema en el que un mapa es solo una parte de la página, y en un dispositivo móvil, si se desplaza hacia abajo hasta el mapa, llena la pantalla y ya no puede desplazarse por la página; en su lugar, desplaza el mapa.
así que cambié la opción arrastrable para tener desplazamientos de mapa con dos dedos. Esto funciona.
var mymap = L.map('mapid', { center: [latitude,longitude], zoom: 17, layers: [streetmap], //default layer dragging: !L.Browser.mobile, tap: !L.Browser.mobile //twofinger map controls, one finger page scrolling });Pero todavía quiero que el mapa siga automáticamente al jugador, a menos que haya arrastrado deliberadamente el mapa (y luego un botón para volver al movimiento automático). El código de relevancia para esas cosas está aquí:
var panbtn = L.easyButton({ states: [{ stateName: 'pauseAutoMove', icon: 'fa-sign-in fa-lg', title: 'Centre display at current Player', //Tooltip onClick: function(btn, map) { //if you click the button whilst it is in pauseAutoMove, recentre map and unpause currentAutoMove = true; //Set flag, that currently map is being moved to recentre mymap.panTo([latitude,longitude]); currentAutoMove = false; //Remove flag again pauseAutoMove = false; //set flag to stop Auto moving map panbtn.state('AutoMove'); } },{ stateName: 'AutoMove', //clicking the button once it is doing AutoMove does nothing icon: 'fa-crosshairs fa-lg', }] }).addTo(mymap); mymap.on("zoomstart", function (e) { currentAutoMove = true }); //Set flag, that currently map is moved by a zoom command mymap.on("zoomend", function (e) { currentAutoMove = false }); //Remove flag again mymap.on('movestart',(e)=>{ //Check if map is being moved if(!currentAutoMove){ //ignore if it was a natural PlayerLoc or programmatic update pauseAutoMove = true; //set flag to stop Auto moving map panbtn.state('pauseAutoMove'); //change button style to remove crosshairs and have a arrow-in icon } });y en otros lugares
function updatemap() { // Update the current player location on map playerLoc.setLatLng([latitude,longitude]); //update current player marker instead of creating new ones //other stuff goes here to update too if(!pauseAutoMove){ //pan the map to follow the player unless it is on pause currentAutoMove = true; //Set flag, that currently map is moved by a normal PlayerLoc Auto update mymap.panTo([latitude,longitude]); currentAutoMove = false; //Remove flag again }; mymap.invalidateSize(); //reset map view }; // end updatemapAhora que tengo map-drag con dos dedos, en el móvil, NO registra el cambio de estado a panbtn. El mapa vuelve a aparecer y no puedo detenerlo ahora. (Todavía funciona según lo previsto en una pantalla de PC).
Entonces, mi pregunta: parece mymap.on('movestart',(e)=>{... ¿NO se activa al arrastrar con dos dedos? ¿Hay alguna forma de volver a habilitarlo?
Los eventos de folleto para la interacción táctil, incluido el zoom táctil (que es lo que sucede cuando usa 2 dedos, incluso solo para desplazarse) son "touchstart" , "touchmove" y "touchend" .
Sin embargo, es probable que estos eventos se activen incluso con un toque de un dedo, por lo que es posible que deba agregar una verificación similar a Leaflet TouchZoom hamdler: https://github.com/Leaflet/Leaflet/blob/v1.7.1/src/map/handler /Map.TouchZoom.js#L68
Entonces podrías combinar con lo que tienes con algo como:
function mayDisableAutomove() { //Check if map is being moved if(!currentAutoMove){ //ignore if it was a natural PlayerLoc or programmatic update pauseAutoMove = true; //set flag to stop Auto moving map panbtn.state('pauseAutoMove'); //change button style to remove crosshairs and have a arrow-in icon } }); mymap.on('touchmove', (e) => { if (!e.touches || e.touches.length !== 2) { return; } mayDisableAutomove(); }); mymap.on('movestart', mayDisableAutomove);