传单易按钮，状态和颜色

Leaflet easybutton, states and color

本文关键字：颜色 状态 单易 按钮      更新时间：2023-09-26

我有一个奇怪的问题。我仍然是一个初学者，改变你不完全理解的代码特别困难。

我在地图上有 2 个简单按钮。两者都是单独制作的（来自同一指令的不同实例）。

现在它们应该有不同的颜色。我可以在制作按钮的地方使用颜色，所以我认为这应该很容易。

现在（我从其他人那里得到的代码），每个按钮实际上是 2 个按钮交替显示，这有效，只是它们有时似乎会交换位置。

var btn1 = L.easyButton('fa-dot-circle-o', function() {
      self.trackingModeActive = true;
      map.removeControl(btn1);
      map.addControl(btn2);
    }, 'Mode 1', map);
    var btn2 = L.easyButton('fa-expand', function() {
      self.trackingModeActive = false;
      map.removeControl(btn2);
      map.addControl(btn1);
    }, 'Mode2', '');

我首先尝试的是： 

btn1.btn.style.backgoundColor = 'red';

和它的变体，但它不起作用（找不到样式对象）。我读到你可以像图片一样放置 html 代码而不是符号变量（这里的"fa-dot-circle-o"），并认为我可以放置这样的样式属性，但当我这样做时，它只会将该代码写入类属性，例如

class="<img src="...">"

所以这也对我不起作用。

然后我读到状态是可能的，认为我也可以正确地做到这一点，并从easyButton网站上尝试了这个：

var stateChangingButton = L.easyButton({
    states: [{
      stateName: 'zoom-to-forest',   // name the state
      icon: 'fa-tree',          // and define its properties
      title: 'zoom to a forest', // like its title
      onClick: function (btn, map) {  // and its callback
        map.setView([46.25, -121.8], 10);
        btn.state('zoom-to-school'); // change state on click!
      }
    }, {
        stateName: 'zoom-to-school',
        icon: 'fa-university',
        title: 'zoom to a school',
        onClick: function (btn, map) {
          map.setView([42.3748204, -71.1161913], 16);
          btn.state('zoom-to-forest');
        }
      }]
  });
  stateChangingButton.addTo(map);

我得到的是：参考错误：地图未定义 在Object.L.easyButton（easy-button.js：55）。

我把这个状态更改按钮代码放在其他按钮代码的正下方，所以我不明白为什么不会为此定义映射变量，而是为其他按钮定义。

我希望有人能给我一个提示，说明哪里/为什么会出错。我宁愿解决状态更改按钮问题并从那里开始，但我真的很好奇其他尝试出了什么问题。

编辑：以防万一有人有类似的问题，我找到了原因，它显然只是传单的超级旧版本，它只允许语法L.easyButton（"图标"，函数，"文本"，地图），没有别的。不幸的是，我不允许更新版本。

我使用这种类型的代码来添加一个EasyButton并在其上添加一些样式：

   backButton = L.easyButton('<span class="backButton">&larrhk;</span>', function (btn, map) {
               //ONCLICK EVENT HERE
            },
            { position: 'bottomright' });
            //Add to the map
            map.addControl(backButton);

我为我的按钮定义了一个类，所以我可以添加一些 css 样式（顺便说一句，您可以更改它）：CSS 示例：

<style> 
   .backButton{
      font-size: 3.5em;
    } 
</style>

这只是一个例子，但我希望它能帮助你。

您正在使用"btn"参数。它不存在。btn1.btn.style.backgoundColor = 'red';尝试使用类似按钮

btn1.button.style.backgoundColor = 'red';

您可以看到更多属性，如果您创建控制台.log（btn1）;此致敬意

杭德罗

相关文章：