从 Leaflet.js 地图添加/删除 L.control

I have a map that changes tiles based on four radio buttons. I need the popup window that appears when you roll over a tile to change as the different map layers change. I've gotten it to appear but when I switch layers the map just adds another popup window. I tried using control.removeFrom(map) but it doesn't seem to work. I think my logic may be screwed up somewhere. Here is one of the if statements:

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

您可以在这里查看(损坏的)地图.

推荐答案

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

    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