페이지를 스크롤 할 때 맵이 이동하지 않도록하는 방법


10

HTML 페이지에지도가 포함되어 있고 사용자가 마우스 휠을 사용하여 페이지를 아래로 스크롤하면 사용자의 마우스가지도를 지나갈 때지도 자체가 이동하는 동안 페이지 스크롤이 중지됩니다. Demo1을 참조하십시오 .

ArcGIS Server JS API 3.x를 사용하는 Google지도에 대한 간단한 사용성 요령에 설명 된 동작을 에뮬레이션하고 싶습니다 .

즉, 사용자가지도 내에서 명시 적으로 드래그하지 않으면 페이지가 스크롤되어야하며 ,이 경우 지도가 이동해야합니다 .

이 동작은 Demo2에 거의 있으며 , 마우스가지도 위에 있어도 페이지가 스크롤됩니다.

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

그러나 먼저 맵 내에서 한 번 클릭하고 마우스 단추를 놓은 다음 이동하지 않으면 맵 이동이 활성화되지 않습니다. 블로그 게시물에서 Google지도로 표시되는 완벽한 효과를 얻을 수 있습니까?

mouse-drag, mouse-drag-startmouse-down이벤트를 시도 했지만 동작은 모든 이벤트에서 동일합니다.


1
이벤트를 enableMapNavigation다시 호출 한 직후에 시도 할 수 있습니다 mouse-drag-start. 이벤트를 생성하는 dojo 클래스로 dojotoolkit.org/reference-guide/1.10/dojo/Evented.html 을 찾았 습니다 . 따라서 동일한 기능에서지도에서 드래그 (또는 클릭)->지도 탐색 사용-> 드래그 이벤트를 호출합니다 (단지 호출하거나 매개 변수가 필요할 수 있음)-> 비즈니스 드래그를 수행하십시오. 마우스를 아래로 집어 들고 끌 수 있습니다. 이러한 이벤트를 다른 순서로 시도해 보는 조합 일 수도 있습니다.
Branco

답변:


2

dis / enableScrollWheelZoom 메서드 대신 dis / enableMapNavigation 메서드 를 사용하는 이유는 절대로 없습니다 . 후자를 사용하십시오.


(1) 스크롤 휠을 사용할 때지도의 기본 동작은 이동 (확대 아님)이고 (2) map.disablePan();스크롤 휠에는 적용되지 않고 드래그하여 이동 하기 때문에이 방법은 작동 하지 않습니다. jsfiddle.net/g7npfuvn/16
Stephen Lead

아, 문제는 Mac에서 테스트하고 있다는 것입니다 smartNavigation. 적용 대상 : 트랙 패드 또는 매직 마우스를 사용하는 Apple 컴퓨터의 경우 확대 / 축소 대신 팬을 살짝 밉니다 . 이것을 false로 설정하고 PC에서 테스트하면 작동합니다. 이것이 Mac에서 ArcGIS Server JS API의 제한 사항 인 것 같습니다.
Stephen Lead

값을 false로 설정하면 os + 하드웨어에 관계없이 동일한 동작을 보게됩니다. mousemove 이벤트를 수신하고 감지시 smartNav를 끄는 것을 고려 하십시오 . 여기 에서 수행 한 작업과 유사합니다 .
Zack
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.