지도를 클릭 한 후에 만 ​​전단지 마우스 휠 줌

Leaflet JavaScript Library로 작업하고 있으며 HTML 문서에 (작업) 맵을 첨부했습니다. 페이지 중간에 있으며 마우스 휠로 아래로 스크롤하여지도에 도달하면지도가 자동으로 확대됩니다.

지도에서 멈추지 않고 페이지를 스크롤하고 싶습니다. 지도를 처음 클릭 한 후에 만 ​​휠 줌을 활성화하는 방법이 있습니까?

간단합니다 : scrollWheelZoom: false옵션으로 L.Map을 만든 다음 리스너를 추가하십시오 :

map.once('focus', function() { map.scrollWheelZoom.enable(); });

확대 / 축소를 전환해야하는 경우 :

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

허용 된 답변 의 전환 구성 요소에 대한 의견 / 개선 사항이 많았 습니다 (감사합니다). 그러나.

지도와 상호 작용할 때 많은 사용 사례의 경우 사용자는지도를 클릭하여 작업을 수행해야합니다.

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

사용자가 실제로지도를 사용하기 시작하면 예기치 않은 동작이 발생할 수 있습니다.

마우스 스크롤을 비활성화 하려면 사용자 가지도를 좀 더 직관적으로 클릭 하는 것이 좀 더 직관적 인 것처럼 보일 수 있습니다 .

예를 들어 scrollWheelZoom: false위와 같이 설정 한 후 다음을 수행하십시오.

map.on('focus', function() { map.scrollWheelZoom.enable(); });
map.on('blur', function() { map.scrollWheelZoom.disable(); });

리플렛. 수면 은 작업을 쉽게 만들고 구성 할 수 있습니다.

기본적으로 스크롤 이벤트는 필요하지 않을 때는 끄고, 필요하면지도를 "깨 웁니다".

나는 코드를 게시했지만 기본값은 올바르게 표시되는 것 같습니다. 그래서 넘어서는 아무것도 필요하지 않으며 <script src="path/to/leaflet-sleep.js"></script>다음과 같은 맵 이 있습니다.

그 세 줄만으로 그렇게 할 수 있습니다.

map.scrollWheelZoom.disable();
map.on('focus', () => { map.scrollWheelZoom.enable(); });
map.on('blur', () => { map.scrollWheelZoom.disable(); });

또는:

map.scrollWheelZoom.disable();
this.map.on('click', () => { this.map.scrollWheelZoom.enable();});
this.map.on('mouseout', () => { this.map.scrollWheelZoom.disable();});