传单上的可点击 L.控件

Clickable L.control on leaflet

本文关键字：控件      更新时间：2023-09-26

我正在尝试在我的传单地图中添加一个L.Control元素。但是，一旦我将元素添加到我的地图中，我注意到它并不clickable。我想在这个L.Control元素中显示一个表单，但是我无法从下拉菜单中选择任何元素，因为点击总是通过地图。

这里有一个 JSfiddle： http://jsfiddle.net/fd3dnnc1/1/

以及我的JS代码：

var map = L.map('map').setView([0.27, 37.66], 6);
        // add an OpenStreetMap tile layer
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var mainMenu = L.Control.extend({
                options: {position: 'topright'},
        onAdd : function (map) { 
                this._div = L.DomUtil.create('div', 'mainMenu');
                this._div.innerHTML =  '<h3>Main Menu</h3>';
        this._div.innerHTML +=  '<h4>Data:</h4> MODIS NDVI <h4>AOI:</h4> Kenya, Africa <br><br>'
        this._div.innerHTML +=  '<h4>Indicator:</h4>'
        this._div.innerHTML +=  '<form><form id="form" class="form" action="" method="POST">' +
                        '<select name="indicator"><option value="NDVI_ABS">NDVI<br>' + 
                        '<option value="NDVI_VCI">VCI<br>' +
                        '<option value="RAIN_ABS">Precipitation<br>' +
                        '</select>';                        
        this._div.innerHTML += '<input type="submit" value="Refresh Map"  name="submit"></form>';   
        return this._div;     
                },                                  
        });
        map.addControl(new mainMenu());

关于如何使其可点击的任何建议？

如果你看一下随传单一起提供的L.Control.Layers的源代码，你可以看到他们使用L.DomEvent来禁用或停止容器上点击和/或滚动事件的传播。您应该执行完全相同的操作，它将按预期工作：

if (!L.Browser.touch) {
    L.DomEvent
        .disableClickPropagation(this._div)
        .disableScrollPropagation(this._div);
} else {
    L.DomEvent.on(this._div, 'click', L.DomEvent.stopPropagation);
}

更新的小提琴：http://jsfiddle.net/az9w0r5L/

您是否将

单击处理程序连接到按钮？我用这个更新了你的小提琴：

$('#refreshBtn').on('click', function () {
    alert('hello world');
});

我收到了警报。

我找到了一个解决方案： 我实际上不再使用L.Control了，但我决定使用一个新的div tag来代替使用CSS（z-index）：

JSFiddle： http://jsfiddle.net/fd3dnnc1/3/

#menu {
position: absolute;
width: 300px;
z-index: 100;
}

#map {
height:100%;
width:100%;
z-index: 1;
}
<div id="map"></div>
<div id="menu">Menu Content here</div>
相关文章：