Javascript 单张删除/更新图例

我读过关于如何从传单地图中删除图例的帖子，但仍然没有任何运气。我有一个图例，我想链接到一个按年份索引的时间滑块。我想无论时间滑块在哪一年都要显示图例。以下是我创建图例的功能：

function createLegend3(map, index){


var legendControl = L.Control.extend({
    options: {
        position: 'bottomright'
    },
    onAdd: function(map){
       //create the container with a class name
        var container = L.DomUtil.create('div', 'legend-control-container');

        container.innerHTML += index
        //create temporal legend
        return container;
    }
});
// //add the legendControl to map
map.addControl(new legendControl); 
return legendControl;

})

如前所述，我有一个单独的时间滑块功能，用户可以使用时间滑块范围滑块滚动不同的年份。我知道，我的想法不是很有效，而是每年调用createLegend3，使用索引作为参数：

if (index == 1971) {
                createLegend3(map, index)

if (index == 1972) {
                createLegend3(map, index)

---

问题在于，地图每次只是添加一个新的图例，而不是更新。是否有一种方法可以简单地删除现有图例并添加另一个图例，以便一次只显示一个图例？还是更有效的方法根据时间滑块中的索引值更新图例？提前非常感谢。

您只是在添加图例。如果要替换它，应首先使用L.Map的removeControl方法删除添加的图例。更好的方法不是执行整个remove、create、add循环，而是向L.Control添加一个方法，该方法只更新容器的innerHTML。然后，您可以简单地调用map.legend.setContent并使用它

L.图例=L.Control.extend{ “onAdd”：函数映射{ //添加对mapinstance的引用 map.legend=这个； //创建容器 var container=L.DomUtil.create'div'，'legend control container'； //如果提供内容 如果此选项为.options.content{ //设置内容 container.innerHTML=this.options.content； } 返回容器； }, “onRemove”：函数映射{ //从mapinstance中删除引用 删除map.legend； }, //设置innerHTML的新方法 “setContent”：functionstr{ this.getContainer.innerHTML=str； } }; 新L.地图“传单”{ “中心”：[0,0]， “缩放”：0 }.addControlnew L.Legend{ “位置”：“右上角”， “内容”：新日期 }.点击，功能e{ //在mapinstance上使用引用 this.legend.setContentnew日期； }; 身体{ 保证金：0； } html、正文、传单{ 身高：100%； } 单张1.0.3

---

您好iH8，谢谢您的回复！我运行了你的代码，但仍然无法显示任何图例。有什么想法吗？我需要一些初始的调用，比如：this.legend.addtomapw，而不需要你在JSFiddle或Plunker上分享一个例子，它清楚地显示出哪里出了问题，我在这里一无所知，只是猜测而已。为什么不用叉子把我的东西换成你正在做的东西，然后贴在这里？