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

问题描述

我有一张基于四个单选按钮更改图块的地图.我需要在您滚动图块时出现的弹出窗口，以便随着不同地图图层的变化而变化.我已经让它出现了，但是当我切换图层时，地图只会添加另一个弹出窗口.我尝试使用 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);
            }

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

推荐答案

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

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！