Clickable L.control on leaflet

我正在嘗試在我的傳單地圖中添加L.Control元素。但是，一旦我將該元素添加到我的地圖中，我注意到它不是clickable。我想在這個L.Control元素中顯示一個表單，但是我不能從我的下拉菜單中選擇任何元素，因爲點擊總是通過地圖。Clickable L.control on leaflet

這裏一個的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());

如何使它可點擊任何建議？

來源

2014-12-01 maRtin

我找到了一個解決方案：我其實沒有使用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>

來源

2014-12-01 22:28:18 maRtin

您是否將點擊處理程序連接到了您的按鈕？我用這個更新了你的fiddle：

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

我得到了警報。

來源

2014-12-01 22:22:35

事實上，我得到一個警報，謝謝。但我仍然無法從下拉菜單中選擇任何內容。 – maRtin 2014-12-01 22:24:17

如果您查看隨Leaflet提供的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/

來源

2014-12-02 00:51:21 iH8

嗨iH8，你如何看待這個討論以及來自哀悼者的最新評論https://github.com/Leaflet/Leaflet/issues/2813？我們可以改進你的解決方案嗎謝謝你， – Franckl 2015-04-07 23:59:58

，它爲我工作 – 2017-08-16 14:13:15

Clickable L.control on leaflet

回答

相關問題