传单Js自定义控制按钮添加(文字,悬停)

2022-01-12 00:00:00 button leaflet javascript

我遵循了 这个 control-button-leaflet 教程,它对我有用.现在我想:

  1. 当我将鼠标悬停在按钮上时显示一些文本(例如使用缩放按钮)
  2. 当我将鼠标悬停在按钮上时更改按钮的颜色
  3. 能够在按钮内写入文本而不是图像.

代码如下:

 var customControl = L.Control.extend({选项: {位置:左上角"},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 = 函数(){console.log('buttonClicked');}返回容器;}});变量映射;var readyState = 函数(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');容器.type="按钮";

  1. 然后就可以轻松设置鼠标悬停文本了:

    container.title="没有猫";

  2. 还有一些文字而不是图片:

    container.value = "42";

  3. 您可以使用鼠标事件来设置按钮样式:

    container.onmouseover = function(){container.style.backgroundColor = '粉色';}容器.onmouseout = 函数(){container.style.backgroundColor = '白色';}

(你当然可以用 css 完成最后一部分,可能更优雅)

完整示例:http://codepen.io/anon/pen/oXVMvyp>

I followed this control-button-leaflet tutorial and it worked for me. Now I want to:

  1. show some text when i hover over the button (like with the zoom buttons)
  2. Change the color of the button when i hover over it
  3. 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";

  1. Then you can easily set a mouseover text:

    container.title="No cat";
    

  2. And some Text instead of an image:

    container.value = "42";
    

  3. 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

相关文章