Отключить временное взаимодействие с листовкой


20

Как я могу временно отключить масштабирование / перетаскивание Mapview в Leaflet.js Пробовал так много способов, но безуспешно. Важно сделать его временным, и мне также нужно включить его снова.


Есть идеи, как это сделать с помощью CSS? Мне нужно отключить перетаскивание на мобильном телефоне с помощью медиа-запроса. Я попытался установить прозрачный слой поверх него, но он щелкает прямо через этот слой. Я даже играл с указателями, но не повезло. Правильный подход наиболее вероятен благодаря использованию -webkit-user-drag: none; но я применил это к каждому элементу, который я могу найти, и до сих пор не повезло. Благодарю.

Я ответил на этот вопрос ниже .
хаятбиралем

Ответы:


33

вы захотите сделать (при условии, что ваша карта называется коллом 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';

2
Большое спасибо. Я выглядел так неправильно - думал, что для этого должен быть один метод.
Бернхард

1
У этого решения есть некоторые проблемы: Курсор мыши - все еще рука. Прокрутка страницы с помощью сенсорных жестов невозможна на карте. Когда открытие Popover перемещает карту, оно никогда не сдвинется назад.
netAction

@netAction, у вас есть решение проблемы с прокруткой сенсорных жестов?
Крис Фремген

@ChrisFremgen: map.dragging.disable (); делает трюк, что карта перестает получать жесты прокрутки.
netAction

Есть ли способ отключить только zoomIn?
Говард.

5

Если вы не хотите отключать каждый обработчик вручную, вы можете зациклить их все и отключить / включить их.

Отключить

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

});

включить

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

});

Помните, что использование непубличных свойств (_handlers) может вызвать ошибку в вашем коде даже при изменениях версии патча листовки, поскольку это не гарантирует неизменность. Запрос о
добавлении

0

Я думаю, вы можете обернуть свою карту вспомогательным контейнером и отключить ее простым 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;
}

Я надеюсь, что это помогает.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.