Отключить панорамирование / перетаскивание на карте листовки для div внутри карты

Кто-нибудь знает, как подавить панорамирование, когда вы нажимаете и перетаскиваете поверх блока div, встроенного в саму карту?

Например, здесь , когда вы нажимаете и перетаскиваете поверх легенды, карта перетаскивается вместе с вами. Я хочу подавить эту функцию. Я знаю, если это техника, но я хочу знать, если это единственный способ:

map.dragging.disable();

leaflet Мистер Конколато
источник

Я реализовал аналогичные функции с помощью слушателя jQuery .hover (используя handlerIn и handlerOut, чтобы отключить и включить перетаскивание). Не уверен, что это вариант для вас: api.jquery.com/hover

evv_gis

Ответы:

Используя пример с веб-сайта Leaflet, обратите внимание, где L.Controlсоздается экземпляр объекта info; это <div>поле в правом верхнем углу, связанное с парящим взаимодействием карты. Вот где это определено в index.htmlпримере Leaflet:

    // control that shows state info on hover
    var info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
            '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
            : 'Hover over a state');
    };

    info.addTo(map);

Чтобы отключить перетаскивание, когда курсор пользователя находится внутри этого <div>поля , добавьте прослушиватель событий в HTMLElement( <div>элемент), который содержит L.Controlобъект:

    // Disable dragging when user's cursor enters the element
    info.getContainer().addEventListener('mouseover', function () {
        map.dragging.disable();
    });

    // Re-enable dragging when user's cursor leaves the element
    info.getContainer().addEventListener('mouseout', function () {
        map.dragging.enable();
    });

Напомним, что mapбыл определен как L.Mapэкземпляр ранее.

Артур
источник

Спасибо @ Артур, я знаком с этим подходом. Я надеялся, что кто-то может предложить решение, использующее css, как в указателях-событиях: авто или указателя-событиях: ничего или что-то вроде тех, которые не совсем мне подходят. Если никто не отправит лучшее решение, я дам вам чек, так как это будет означать, что это лучшее решение.

Мистер Конколато,

Я тоже хотел бы это увидеть. Было бы неплохо, если бы CSS мог решить эту проблему, но какому элементу следует управлять событиями указателя? leaflet-controlЭлемент содержится в leaflet-containerэлементе , а второй получает указатель события , которые вызывают увеличение и панорамирование.

Артур

Я пытался поставить его на интерес, но безрезультатно.

Мистер Конколато,

Да, и это имеет смысл: <div>интерес - это дитя, leaflet-controlкоторое само внутри leaflet-container. События принимаются parent ( leaflet-container) перед child ( leaflet-control).

Артур

Альтернативное решение - остановить распространение событий с помощью JavaScript (как это делается для элементов управления Leaflet, например, кнопок масштабирования):

var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
    L.DomEvent.disableClickPropagation(div);
    L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
    L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}

Илья Зверев
источник