Question

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

我在地图上有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';

及其变体，但它不起作用（找不到样式对象）。我读到的不是符号变量（'fa-dot-circle-o'这里），你可以把html代码放在图片（example）之内，并认为我可以放一个这样的样式属性但是当我这样做的时候它只将代码写入类属性，如

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);

我得到的是：ReferenceError：未定义map 在Object.L.easyButton（easy-button.js：55）。

我将这个stateChangingButton代码放在其他按钮代码的正下方，所以我不明白为什么不为此定义map变量，而是为其他按钮定义。

我希望有人可以给我一个暗示，哪里出错/为什么出错。我更愿意解决stateChangingButton问题并从那里开始，但我真的很好奇其他尝试出了什么问题。

编辑：只是因为任何人都有类似的问题，我找到了原因，它只是一个超级旧版本的Leaflet，它只允许语法L.easyButton（'icon'，function，'text'，地图），没别的。不幸的是，我不允许更新版本。

Answer 1

我使用这种类型的代码添加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样式（你可以改变它btw）： Css示例：

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

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

Answer 2

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

btn1.button.style.backgoundColor ='红色';

如果创建console.log（btn1），则可以看到更多可以修改的属性。最好的问候

亚历杭德罗

Leaflet easybutton，states and color

2 个答案: