javascript - 从 leaflet.js 映射中添加/删除 L.control

Question

我有一张 map 可以根据四个单选按钮更改图 block 。我需要当您在图 block 上滚动时出现的弹出窗口随着不同 map 层的变化而变化。我已经让它出现了，但是当我切换图层时， map 只会添加另一个弹出窗口。我尝试使用 control.removeFrom(map) 但它似乎不起作用。我认为我的逻辑可能在某处搞砸了。这是 if 语句之一:

if (two == true && black == true) { 
                function blkNineStyle(feature) {
                    return {
                    fillColor: getColor(feature.properties.pctBlack9000),
                    weight: 2,
                    opacity: 1,
                    color: '#666',
                    dashArray: '2',
                    fillOpacity: 0.9
                    };
                }
                                    //Tried to us this to take off the control.
                info.removeFrom(map);
                map.removeLayer(geojson);
                geojson = L.geoJson(tracts, {style: blkNineStyle, onEachFeature: onEachFeature}).addTo(map);

                var info = L.control();

                info.onAdd = function (map) {
                    this._div = L.DomUtil.create('div', 'info');
                    this.update();
                    return this._div;
                };

                info.update = function (props) {
                    this._div.innerHTML = '<h4>Percent White population change</h4>' + (props ? '<b>' + props.name + '</b><br />' + props.pctBlack9000 + '%' : 'Hover over a tract');
                };

                info.addTo(map);
            }

您可以看到(损坏的) map here.

Answer 1

我自己也遇到了同样的问题，我刚刚解决了。

我必须在全局环境中定义一个空变量(在您使用的任何函数之外)。这不是完整的脚本或任何东西，但我描述的总体思路如下:

    var info;  // CREATING INFO VARIABLE IN GLOBAL ENVIRONMENT
    function makeMap() {
    ..... geojsons, styles, other stuff ....

    // REMOVING PREVIOUS INFO BOX
    if (info != undefined) {
    info.removeFrom(map)
    }

    // making current layer's info box
    info = L.control();

    info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info');
    this.update();
    return this._div;
    };

    info.update = function (props) {
    this._div.innerHTML = '<h4>Data by Zip Code</h4>' + (props ?
    '<b>Zip Code:  ' + props.id + '</b><br />Value:  ' + matchKey(props.id, meanById)
    : 'Hover over a zip code');
    };

    info.addTo(map);

    ..... other stuff again ......

    } // end function

我对 Leaflet 和 javascript 都很陌生，所以我不得不说我不确定在您提供的 map 链接上发布的代码中将 info.removeFrom(map) 行放在哪里，但是你在 'info.removeFrom(map)' 的正确轨道上。

我能够通过在这里摆弄来解决动态图例和信息框的问题:http://jsfiddle.net/opensas/TnX96/