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

25

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

Odpowiedzi:

20

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
19

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