問題描述

我有一張基于四個單選按鈕更改圖塊的地圖.我需要在您滾動圖塊時出現的彈出窗口，以便隨著不同地圖圖層的變化而變化.我已經讓它出現了，但是當我切換圖層時，地圖只會添加另一個彈出窗口.我嘗試使用 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模板網！