전단지 상호 작용을 일시적으로 비활성화

Leaflet.js에서 Mapview 조닝 / 드레 이징을 일시적으로 비활성화하는 방법 여러 가지 방법을 시도했지만 운이 없습니다. 임시로 만드는 것이 중요하며 다시 활성화 할 수있는 옵션도 필요합니다.

leaflet

— 베른하르트
소스

CSS로 이것을 수행하는 방법에 대한 아이디어가 있습니까? 미디어 쿼리를 사용하여 모바일에서 드래그를 비활성화해야합니다. 그 위에 투명 레이어를 설정하려고 시도했지만 해당 레이어를 통해 바로 클릭합니다. 나는 심지어 포인터 이벤트로 놀았지만 운이 없었습니다. 올바른 접근 방식은 대부분 -webkit-user-drag를 사용하여 가능합니다. none; 그러나 나는 그것을 찾을 수 있지만 여전히 운이없는 모든 요소에 적용했습니다. 감사.

아래 질문에 답했습니다 .

— hayatbiralem

답변:

하고 싶은 일 (지도가 전화라고 가정 map)

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

로 다시 켜십시오

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';

— 칼뱅
소스

대단히 감사합니다. 나는 너무 잘못보고 있었다 _ 그렇게하는 단일 방법이 있어야한다고 생각했다.

— Bernhard

이 솔루션에는 몇 가지 문제가 있습니다. 마우스 커서는 여전히 손입니다. 터치 제스처로 페이지를 스크롤 할 수 없습니다. Popover를 열면 맵이 이동하지 않습니다.

— netAction

@netAction, 터치 제스처 스크롤 문제에 대한 솔루션이 있습니까?

— Chris Fremgen

@ChrisFremgen : map.dragging.disable (); 지도가 스크롤 제스처 가져 오기를 중지하는 트릭을 수행합니다.

— netAction

확대 만 비활성화하는 방법이 있습니까?

— howard.D

각 처리기를 수동으로 비활성화하지 않으려면 모든 처리기를 반복하고 비활성화 / 활성화 할 수 있습니다.

비활성화

map._handlers.forEach(function(handler) {
    handler.disable();

});

사용

map._handlers.forEach(function(handler) {
    handler.enable();

});

— 우 스트로 에츠
소스

공개되지 않은 속성 (_handlers)을 사용하면 리플렛 패치 버전 변경시에도 변경되지 않은 상태로 유지되므로 코드에 오류가 발생할 수 있습니다. 기능 요청은 전단지로 제출해야합니다.;)

— Luckylooke

내 생각에 도우미 컨테이너로 맵을 래핑하고 간단한 CSS 클래스로 맵을 비활성화 할 수 있다고 생각합니다 is-locked.

내가 말하고있는 것은 다음과 같습니다.

.map-container {
  position: relative;
}

.map-container .map {
  position: relative;
  z-index: 1;
}

.map-container.is-locked:after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;
}

도움이 되길 바랍니다.

— 하야트 비랄 렘
소스