Cómo evitar que el mapa se desplace al desplazarse por la página


10

Cuando una página HTML contiene un mapa, y el usuario se desplaza hacia abajo usando la rueda del mouse, cuando el mouse del usuario pasa sobre el mapa, la página dejará de desplazarse mientras el mapa se desplazará. Ver demostración1 .

Me gustaría emular el comportamiento detallado en Un simple truco de usabilidad para Google Maps utilizando ArcGIS Server JS API 3.x.

Es decir, la página debe desplazarse a menos que el usuario arrastre explícitamente dentro del mapa, en cuyo caso el mapa debería desplazarse .

El comportamiento está casi ahí en Demo2 , donde la página se desplaza incluso si su mouse está sobre el mapa.

map.on("load", function(){
  // Disable navigation by default, so scrolling the page doesn't scroll the map
  map.disableMapNavigation();

  // When the user tries to pan the map, allow this
  map.on('mouse-drag-start', function(){
    map.enableMapNavigation();
  });

  // Restore the no-scroll behaviour when the mouse leaves the map
  map.on('mouse-out', function(){
    map.disableMapNavigation();
  });
});

Sin embargo, la panorámica del mapa no está habilitada a menos que primero haga clic una vez dentro del mapa, suelte el botón del mouse y luego realice una panorámica. ¿Es posible lograr el efecto continuo que se muestra con Google Maps en la publicación del blog?

Probé el mouse-drag, mouse-drag-starty mouse-downeventos, pero el comportamiento es el mismo para todos los eventos.


1
Podrías intentar cuando lo hagas enableMapNavigationinmediatamente después de volver a invocar el mouse-drag-startevento. Encontré dojotoolkit.org/reference-guide/1.10/dojo/Evented.html como una clase de dojo para emitir eventos. Por lo tanto, debería arrastrar (o hacer clic) en el mapa -> habilitar la navegación del mapa -> en la misma función, invocar el evento de arrastre (podría invocar o requerir parámetros) -> continuar arrastrando su negocio. Es posible que pueda levantar el mouse y arrastrarlo. Podría ser un combo de tratar esos eventos en diferentes órdenes, etc.
Branco

Respuestas:


2

Nunca da una razón para usar el método dis / enableMapNavigation en lugar del método dis / enableScrollWheelZoom . Usa el último.


Desafortunadamente, esto no funciona porque (1) el comportamiento predeterminado del mapa es desplazarse (no hacer zoom) cuando se usa la rueda de desplazamiento, y (2) map.disablePan();no se aplica a la rueda de desplazamiento, solo arrastrar para desplazar: jsfiddle.net/g7npfuvn/16
Stephen Lead el

Ah, el problema es que estaba probando en una Mac, donde smartNavigationsurte efecto: cuando es cierto, para computadoras Apple con un trackpad o un mouse mágico, deslice las bandejas en lugar de hacer zoom . Si configuro esto como falso y pruebo en una PC, funciona. Por lo tanto, parece que esto es una limitación de la API JS de ArcGIS Server en una Mac.
Stephen Lead

Si establece el valor en falso, entonces debería estar viendo el mismo comportamiento independientemente del hardware os +. Considere la posibilidad de escuchar un evento de movimiento del mouse y al detectar que apaga smartNav, de forma similar a lo que se ha hecho aquí .
Zack
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.