Leaflet easyButton - 按钮文本未显示（无法调试 addTo）

Question

我在使用 leaflet-easyButton 时遇到了问题。我已经将它安装到我的项目中：

npm install --save leaflet-easybutton

因此，/node_modules 中存在一个文件夹，我可以将其导入到我的组件中：

  import "leaflet-easybutton/src/easy-button";

为了向我的地图添加一个按钮，我这样称呼它，并添加一个带有 title 元素的按钮文本，但是当按钮显示在地图上时，没有文本。 onClick() 虽然工作正常！所以我意识到title实际上是一个工具提示。好的。但我想在运行时查看代码内部。

   L.easyButton({
     position: 'topleft',
     leafletClasses: true,
     states: [
       {
         stateName: 'center',
         onClick: function(btn, map){ alert('This popup works!') },
         title: 'Button Text',
         icon: 'fa-globe'
       }
     ]
   }).addTo( my_map );

我试图调试“addTo”语句，希望看到里面发生了什么，但是调试器没有进入它，而是跳过了它。

奇怪？所以我想如果我在 leaflet 和 leaflet-easyButton 的文件中将 addTo 更改为 addToTemp 或许我可以调试它。这样做绝对没有任何作用。事实上，addTo 仍然有效，即使我在其他地方重命名它而 addToTemp 没有。所以现在它让我想到传单代码是完全不同的地方。

如果不在 /node_modules 中，它在哪里？在我的项目中搜索它没有任何结果。我很困惑？？有人在这里有什么建议吗？

提前感谢您的时间： 恐鸟

Answer 1

你应该试试这个：

L.easyButton("<div>Your Text</div>", function (btn, map) {
  // Code here...
}).addTo(mymap);

如果您想添加一些自定义 HTML 以及状态，您可能需要修改

easybutton

库的原始源代码，如下所示：

function State(template, easyButton){

  this.title = template.title;
  this.stateName = template.stateName ? template.stateName : 'unnamed-state';


  // Check whether we supply some custom markup:

  if ( template.markup ){
    this.icon = L.DomUtil.create('div','');
    this.icon.innerHTML = template.markup;

  } else {
    
    // build the wrapper
    this.icon = L.DomUtil.create('span', '');
    L.DomUtil.addClass(this.icon, 'button-state state-' + this.stateName.replace(/(^\s*|\s*$)/g,''));
    this.icon.innerHTML = buildIcon(template.icon);
  }


  this.onClick = L.Util.bind(template.onClick?template.onClick:function(){}, easyButton);
}

用法：

      L.easyButton({
        position: "topleft",
        leafletClasses: true,
        states: [
            {
                stateName: "center",
                onClick: function (btn, map) {
                    alert("This popup works!");
                },
            markup: "<div>Hello World</div>"
          },
        ],
      }).addTo(mymap);