传单上的可点击L.control [英] Clickable L.control on leaflet
问题描述
我正在尝试向我的传单地图添加一个 L.Control
元素.但是,一旦我将元素添加到地图中,我注意到它不是 clickable
.我想在此 L.Control
元素内显示一个表单,但是我无法从下拉菜单中选择任何元素,因为单击始终会到达地图.
I am trying to add a L.Control
element to my leaflet map.
However once I added the element to my map, I noticed that its not clickable
. I would like to display a form inside this L.Control
element, however I cant select any elements from my drop down menus, since the clicks always go through to the map.
这里有一个JSfiddle: http://jsfiddle.net/fd3dnnc1/1/
Here a 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: '© <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());
关于如何使其可点击的任何建议?
Any suggestions on how to make it clickable?
推荐答案
我找到了一个解决方案:我实际上不再使用 L.Control
,但是我决定使用一个新的 div标签
而不是 CSS
(z-index
):
I found a solution:
I am actually not using L.Control
anymore, but I decided to use a new div tag
instead with the use of CSS
(z-index
):
JSFiddle: http://jsfiddle.net/fd3dnnc1/3/
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>
这篇关于传单上的可点击L.control的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!