传单Js自定义控件按钮添加(文本,悬停) [英] leaflet Js custom control button add (text, hover)
本文介绍了传单Js自定义控件按钮添加(文本,悬停)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我遵循了此控制按钮-传单教程,它对我有用.现在我要:
- 当我将鼠标悬停在按钮上时(例如使用缩放按钮)显示一些文本
- 当我将鼠标悬停在按钮上时更改按钮的颜色
- 能够在按钮内而不是图像上写文本.
代码如下:
var customControl = L.Control.extend({选项: {位置:"topleft"},onAdd:函数(地图){var container = L.DomUtil.create('div','leaflet-bar leaflet-control leaflet-control-custom');container.style.backgroundColor ='白色';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');}返回容器;}});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);
解决方案
似乎您比div更需要Button:
var container = L.DomUtil.create('input');container.type ="button";
-
然后,您可以轻松设置鼠标悬停文字:
container.title =没有猫";
-
还有一些文本而不是图像:
container.value ="42";
-
并且您可以使用鼠标事件来设置按钮的样式:
container.onmouseover = function(){container.style.backgroundColor ='粉红色';}container.onmouseout = function(){container.style.backgroundColor ='白色';}
(您当然可以使用css完成这最后一部分,也许会更优雅)
完整示例: http://codepen.io/anon/pen/oXVMvy >
I followed this control-button-leaflet tutorial and it worked for me. Now I want to:
- show some text when i hover over the button (like with the zoom buttons)
- Change the color of the button when i hover over it
- be able to write text inside the button instead of an image.
Here's the code:
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);
解决方案
It seems you more need a Button than a div:
var container = L.DomUtil.create('input');
container.type="button";
Then you can easily set a mouseover text:
container.title="No cat";
And some Text instead of an image:
container.value = "42";
And you can use the mouse events to style the button:
container.onmouseover = function(){ container.style.backgroundColor = 'pink'; } container.onmouseout = function(){ container.style.backgroundColor = 'white'; }
(you could of course do this last part with css, might be more elegant)
Full example: http://codepen.io/anon/pen/oXVMvy
这篇关于传单Js自定义控件按钮添加(文本,悬停)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文