单张easybutton，状态和颜色

我有点奇怪的问题。我仍然是这样的初学者，而改变你不完全了解的代码尤其困难。单张easybutton，状态和颜色

我在地图上有两个easybuttons。两者是分开制作的（来自同一指令的不同实例）。

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

现在（我从其他人那里得到的代码），每个按钮实际上是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：地图是不是在对象定义 .L.easyButton（easy-button.js：55）。

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

我希望有人可以给我一个提示/出错的地方。我宁愿解决stateChangingButton问题并从那里出发，但我很好奇其他尝试出了什么问题。

编辑：只要incase任何人有类似的问题，我发现原因，它只是一个超级旧版本的Leaflet显然，它只允许语法L.easyButton（'图标'，函数，'文本' ，地图），没有别的。不幸的是我不允许更新版本。

来源

2016-07-06 Silvie

我使用这种类型的代码添加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>

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

来源

2016-07-08 07:14:44 Furtiro

谢谢你试图帮忙。它不起作用，因为它只是将第一个参数（示例中的跨度）放在class =“”后面。但是现在我知道为什么，请参阅编辑。 – Silvie

单张easybutton，状态和颜色

回答

相关问题