Wyłącz tymczasowe interakcje ulotek

Jak mogę tymczasowo wyłączyć Zoming / Draging Mapview w Leaflet.js Próbowałem na wiele sposobów, ale bez powodzenia. Ważne jest, aby uczynić go tymczasowym i potrzebuję również opcji, aby włączyć ponownie.

leaflet

— Bernhard
źródło

Wszelkie pomysły, jak to zrobić za pomocą CSS? Muszę wyłączyć przeciąganie na telefon komórkowy za pomocą zapytania medialnego. Próbowałem ustawić na nim przezroczystą warstwę, ale ona kliknie dokładnie przez tę warstwę. Grałem nawet ze wskaźnikami, ale bez powodzenia. Prawidłowe podejście jest najprawdopodobniej poprzez użycie -webkit-user-drag: none; ale zastosowałem to do każdego elementu, który mogę znaleźć i wciąż nie mam szczęścia. Dzięki.

Odpowiedziałem na to pytanie poniżej .

— hayatbiralem

Odpowiedzi:

chcesz to zrobić (zakładając, że twoja mapa to połączenie 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';

włącz ponownie za pomocą

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';

— Calvin
źródło

Dziękuję Ci bardzo. Tak źle wyglądałem - pomyślałem, że musi istnieć jedna metoda, aby to zrobić.

— Bernhard

W tym rozwiązaniu występują pewne problemy: Kursor myszy jest nadal ręką. Przewijanie strony za pomocą gestów dotykowych nie jest możliwe na mapie. Kiedy otwarcie Popover przesuwa mapę, nigdy się nie przesunie.

— netAction

@netAction, Czy masz rozwiązanie problemu przewijania gestem dotykowym?

— Chris Fremgen

@ChrisFremgen: map.dragging.disable (); robi sztuczkę polegającą na tym, że mapa przestaje pobierać gesty przewijania.

— netAction

Czy istnieje sposób, aby wyłączyć tylko zoomIn?

— howard.D

Jeśli nie chcesz ręcznie wyłączać każdego modułu obsługi, możesz zapętlić wszystkie z nich i wyłączyć / włączyć je.

Wyłączyć

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

});

Włączyć

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

});

— ustroetz
źródło

Uwaga: używanie niepublicznych właściwości (modułów obsługi) może powodować błędy w kodzie, nawet przy zmianach wersji łatki ulotki, ponieważ nie gwarantuje się, że pozostaną niezmienione. Wniosek o udostępnienie funkcji należy złożyć w ulotce;)

— Luckylooke

Myślę, że możesz owinąć mapę kontenerem pomocniczym i możesz ją wyłączyć za pomocą prostej klasy CSS, takiej jak is-locked.

Oto o czym mówię:

.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;
}

Mam nadzieję, że to pomoże.

— hayatbiralem
źródło