Deaktivieren Sie das Schwenken / Ziehen auf der Flugblattkarte für div innerhalb der Karte

25

Weiß jemand, wie man das Schwenken unterdrückt, wenn man auf ein in der Karte selbst eingebettetes Div-Feld klickt und es darüber zieht?

Wenn Sie hier beispielsweise auf die Legende klicken und sie darüber ziehen, wird die Karte mitgezogen. Ich möchte diese Funktion unterdrücken. Ich weiß, ob diese Technik, aber ich möchte wissen, ob dies der einzige Weg ist:

map.dragging.disable();
leaflet Mr. Concolato
quelle
Ich habe eine ähnliche Funktionalität mit einem jQuery .hover-Listener implementiert (mit handlerIn und handlerOut zum Deaktivieren und Aktivieren des Ziehens). Nicht sicher, ob dies eine Option für Sie ist: api.jquery.com/hover
evv_gis

Antworten:

20

Notieren Sie anhand des Beispiels auf der Website der Broschüre, wo das L.ControlObjekt instanziiert ist info. Dies ist das <div>Feld oben rechts, das mit der Hover-Interaktion der Karte verknüpft ist. Hier ist es im index.htmlBeispiel der Broschüre definiert :

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

Um das Ziehen zu deaktivieren, wenn sich der Cursor eines Benutzers in diesem <div>Feld befindet , fügen Sie dem HTMLElement(einem <div>Element), das das L.ControlObjekt enthält , einen Ereignis-Listener hinzu :

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

Erinnern Sie sich, dass mapals die L.MapInstanz zuvor definiert wurde.

Arthur
quelle
Danke @Arthur, ich bin mit diesem Ansatz vertraut. Ich hatte gehofft, jemand könnte eine Lösung mit CSS anbieten, wie in Zeigerereignissen: auto oder Zeigerereignisse: keine oder so etwas, die für mich nicht ganz funktionieren. Wenn sonst niemand eine bessere Lösung veröffentlicht, gebe ich Ihnen den Scheck, da dies bedeutet, dass dies die beste Lösung ist.
Herr Concolato
Das möchte ich auch sehen. Es wäre schön, wenn CSS dieses Problem lösen könnte, aber für welches Element sollten Zeigerereignisse verwaltet werden? Das leaflet-controlElement ist im leaflet-containerElement enthalten, und dieses empfängt die Zeigerereignisse, die Zoomen und Schwenken auslösen.
Arthur
Ich habe versucht, es auf den div von Interesse ohne Erfolg zu setzen.
Herr Concolato
Ja, und das macht Sinn: der <div>Interessierte ist ein Kind, in leaflet-controldem sich selbst befindet leaflet-container. Die Ereignisse werden vom Elternteil ( leaflet-container) vor dem Kind ( leaflet-control) empfangen .
Arthur
19

Eine alternative Lösung besteht darin, die Weitergabe von Ereignissen mit JavaScript zu stoppen (wie dies bei Leaflet-Steuerelementen, z. B. Zoom-Schaltflächen, der Fall ist):

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
quelle