我跟着这个控制按钮传单教程 http://www.coffeegnome.net/control-button-leaflet/这对我有用。现在我想:
- 当我将鼠标悬停在按钮上时显示一些文本(就像缩放按钮一样)
- 当我将鼠标悬停在按钮上时更改按钮的颜色
- 能够在按钮内写入文本而不是图像。
这是代码:
var customControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
container.style.backgroundColor = 'white';
container.style.backgroundImage = "url(http://t1.gstatic.com/images?q=tbn:ANd9GcR6FCUMW5bPn8C4PbKak2BJQQsmC-K9-mbYBeFZm1ZM2w2GRy40Ew)";
container.style.backgroundSize = "30px 30px";
container.style.width = '30px';
container.style.height = '30px';
container.onclick = function(){
console.log('buttonClicked');
}
return container;
}
});
var map;
var readyState = function(e){
map = new L.Map('map').setView([48.935, 18.14], 14);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
map.addControl(new customControl());
}
window.addEventListener('DOMContentLoaded', readyState);
看来你更需要一个 Button 而不是一个 div:
var container = L.DomUtil.create('input');
container.type="button";
-
然后你可以轻松设置鼠标悬停文本:
container.title="No cat";
-
还有一些文本而不是图像:
container.value = "42";
-
您可以使用鼠标事件来设置按钮的样式:
container.onmouseover = function(){
container.style.backgroundColor = 'pink';
}
container.onmouseout = function(){
container.style.backgroundColor = 'white';
}
(你当然可以用CSS来完成最后一部分,可能会更优雅)
完整示例:http://codepen.io/anon/pen/oXVMvy http://codepen.io/anon/pen/oXVMvy
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)