Wyłącz przesuwanie / przeciąganie na mapie ulotki dla div na mapie

Czy ktoś wie, jak wyłączyć panoramowanie, gdy klikniesz i przeciągniesz nad pole div osadzone w samej mapie?

Na przykład tutaj , gdy klikniesz i przeciągniesz nad legendą, mapa przeciągnie się wraz z tobą. Chcę wyłączyć tę funkcję. Wiem, czy ta technika, ale chcę wiedzieć, czy to jedyny sposób:

map.dragging.disable();

leaflet

— Pan Concolato
źródło

Zaimplementowałem podobną funkcję za pomocą detektora jQuery .hover (używając handlerIn i handlerOut, aby wyłączyć i włączyć przeciąganie). Nie jestem pewien, czy jest to dla Ciebie opcja: api.jquery.com/hover

— evv_gis

Korzystając z przykładu ze strony internetowej Ulotki, zanotuj, gdzie L.Controlinstancja obiektu jest tworzona jako info; jest to <div>pole w prawym górnym rogu związane z interakcją najechania na mapę. Oto, gdzie jest to zdefiniowane index.htmlna przykładzie Ulotki:

    // 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);

Aby wyłączyć przeciąganie, gdy kursor użytkownika znajduje się w tym <div>polu , dodaj detektor zdarzeń do HTMLElement( <div>elementu) zawierającego L.Controlobiekt:

    // 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();
    });

Przypomnij sobie, że wcześniej mapzdefiniowano to L.Mapwystąpienie.

— Artur
źródło

Dzięki @Arthur, znam to podejście. Miałem nadzieję, że ktoś może zaoferować rozwiązanie wykorzystujące css jak w przypadku zdarzeń wskaźnikowych: auto lub zdarzenia wskaźnikowe: żadne lub coś podobnego do tych, które nie do końca działają. Jeśli nikt inny nie opublikuje lepszego rozwiązania, dam ci czek, ponieważ będzie to oznaczać, że jest to najlepsze rozwiązanie.

— Pan Concolato,

Też chciałbym to zobaczyć. Byłoby miło, gdyby CSS mógł rozwiązać ten problem, ale który element powinien zarządzać zdarzeniami wskaźnika? leaflet-controlElement jest zawarty w leaflet-containerelemencie, a drugi odbiera zdarzenia wskaźnik, który zoom wyzwalania i przesuwanie.

— Arthur

Próbowałem nałożyć na to zainteresowanie, ale bezskutecznie.

— Pan Concolato,

Tak, i to ma sens: <div>interesuje się dzieckiem, leaflet-controlktórego jest w sobie leaflet-container. Zdarzenia są odbierane przez parent ( leaflet-container) przed child ( leaflet-control).

— Arthur

Alternatywnym rozwiązaniem jest zatrzymanie propagacji zdarzeń za pomocą JavaScript (tak jak w przypadku kontroli Ulotki, np. Przycisków powiększenia):

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

— Ilja Zverev
źródło