从leaflet.js地图添加/删除L.control [英] Adding/removing L.control from leaflet.js map

问题描述

我有一张地图可以根据四个单选按钮更改切片。我需要在您滚动图块时显示的弹出窗口，以便随着不同的图层更改而更改。我已经让它出现但是当我切换图层时，地图只会添加另一个弹出窗口。我尝试使用control.removeFrom（map）但它似乎不起作用。我认为我的逻辑可能会搞砸到某个地方。以下是if语句之一：

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

你可以看到（破碎的）地图这里。

You can see the (broken) map here.

推荐答案

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

I had this same problem myself and I just solved it.

我必须在全局环境中定义一个空变量（在你正在使用的任何函数之外）。这不是一个完整的脚本或任何东西，但我所描述的一般想法如下：

I had to define an empty variable in the global environment (outside any functions you're using). This isn't a full script or anything, but the general idea I'm describing is below:

    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都很新，所以我不得不说我不确定在代码中放置info.removeFrom（map）行的位置你已经发布了你提供的地图链接，但是你在'info.removeFrom（map）'的正确轨道上。

I am very new to both Leaflet and javascript, so I have to say that I'm not exactly sure where to place the info.removeFrom(map) line in the code you have posted at the map link you provided, but you are on the right track with 'info.removeFrom(map)' .

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

I was able to problem-solve my issue with dynamic legends and info boxes by fiddling around here: http://jsfiddle.net/opensas/TnX96/

这篇关于从leaflet.js地图添加/删除L.control的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！