Harita içinde gezinmek için broşür haritasında kaydırma / sürüklemeyi devre dışı bırak

Haritanın içinde gömülü bir div kutusunun üstüne tıklayıp sürüklediğinizde kaydırmayı nasıl bastıracağını bilen var mı?

Örneğin , burada , göstergenin üstüne tıklayıp sürüklediğinizde, harita sizinle birlikte sürüklenir. Bu işlevi bastırmak istiyorum. Bu tekniğin olup olmadığının farkındayım, ancak bunun tek yol olup olmadığını bilmek istiyorum:

map.dragging.disable();

leaflet

— Bay Concolato
kaynak

Bir jQuery .hover dinleyicisini kullanarak (sürüklemeyi devre dışı bırakmak ve etkinleştirmek için handlerIn ve handlerOut kullanarak) benzer bir işlevsellik geliştirdim. Bunun sizin için bir seçenek olup olmadığından emin değilsiniz: api.jquery.com/hover

— evv_gis

Yanıtlar:

Leaflet web sitesindeki örneği kullanarak ,L.Control nesnenin nerede örneklendiğine dikkat edin info; bu <div>haritanın vurgulu etkileşimi ile ilişkili sağ üstteki kutudur. İşte index.htmlLeaflet örneğinden tanımlandığı yer :

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

Bir kullanıcının imleci bu <div>kutunun içindeyken sürüklemeyi devre dışı bırakmak için nesneyi içeren HTMLElement(bir <div>öğeye) bir olay dinleyicisi ekleyin 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();
    });

Daha önceki örnek mapolarak tanımlanmış olan geri çağırma L.Map.

— Arthur
kaynak

Teşekkürler @Arthur, bu yaklaşıma aşinayım. Birinin css kullanarak işaretçi-olaylarında olduğu gibi bir çözüm önerebileceğini umuyordum: otomatik ya da işaretçi-olaylar: hiçbiri ya da benim gibi çalışmayan bir şey. Eğer hiç kimse daha iyi bir çözüm yollamazsa, size en iyi çözüm olduğu anlamına geleceği için çek vereceğim.

— Bay Concolato

Bunu da görmek isterim. CSS bu problemi çözebilseydi daha iyi olurdu, ama hangi elementi pointer olaylarını yönetmeli? leaflet-controlElementi içerdiği leaflet-containereleman ve ikinci tetik zum ve kaydırma bu hadiseleri alma edilir.

— Arthur

Ben boşuna ilgisizlik div koymak için çalışıyordum.

— Bay Concolato

Evet, bu mantıklı: <div>ilgi konusu leaflet-control, içinde olduğu bir çocuktur leaflet-container. Olaylar leaflet-container, çocuk ( leaflet-control) öncesi ebeveyn ( ) tarafından alınır .

— Arthur

Buna alternatif bir çözüm, JavaScript ile olay yayılımını durdurmaktır (Leaflet kontrolleri için olduğu gibi, örneğin yakınlaştırma düğmeleri):

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
kaynak