問(wèn)題描述

我有一張基于四個(gè)單選按鈕更改圖塊的地圖.我需要在您滾動(dòng)圖塊時(shí)出現(xiàn)的彈出窗口，以便隨著不同地圖圖層的變化而變化.我已經(jīng)讓它出現(xiàn)了，但是當(dāng)我切換圖層時(shí)，地圖只會(huì)添加另一個(gè)彈出窗口.我嘗試使用 control.removeFrom(map) 但它似乎不起作用.我想我的邏輯可能在某個(gè)地方搞砸了.這是 if 語(yǔ)句之一:

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

您可以在這里查看(損壞的)地圖.

推薦答案

我自己也遇到了同樣的問(wèn)題，我剛剛解決了.

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

我必須在全局環(huán)境中定義一個(gè)空變量(在您使用的任何函數(shù)之外).這不是一個(gè)完整的腳本或任何東西，但我描述的總體思路如下:

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

我對(duì) Leaflet 和 javascript 都很陌生，所以我不得不說(shuō)我不確定在您提供的地圖鏈接上發(fā)布的代碼中的 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)' .

我能夠通過(guò)在這里擺弄?jiǎng)討B(tài)圖例和信息框來(lái)解決我的問(wèn)題: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/

這篇關(guān)于從 Leaflet.js 地圖添加/刪除 L.control的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！