jQuery 从leaflet.js 地图中添加/删除L.control
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15507737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding/removing L.control from leaflet.js map
提问by user1410712
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:
我有一张地图，可以根据四个单选按钮更改图块。我需要在您滚动图块时出现的弹出窗口，以便随着不同地图层的变化而变化。我已经让它出现了，但是当我切换图层时，地图只会添加另一个弹出窗口。我尝试使用 control.removeFrom(map) 但它似乎不起作用。我想我的逻辑可能在某处搞砸了。这是 if 语句之一：
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.
回答by antarctica77
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
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)' .
我对 Leaflet 和 javascript 都很陌生，所以我不得不说，我不确定在您提供的地图链接上发布的代码中的 info.removeFrom(map) 行的位置，但您在'info.removeFrom(map)' 的正确轨道。
I was able to problem-solve my issue with dynamic legends and info boxes by fiddling around here: http://jsfiddle.net/opensas/TnX96/
我能够通过在这里摆弄动态图例和信息框来解决我的问题：http: //jsfiddle.net/opensas/TnX96/
回答by Vikash Pandey
I believe you want to remove the control similarly how you added it.
我相信您想以类似的方式删除控件。
In this case leaflet provides direct remove()method similar to addTo(map)method.
在这种情况下，传单提供了remove()类似于addTo(map)方法的直接方法。
Example-
例子-
Whenever you want to remove the legend control use following code-
每当您想删除图例控件时，请使用以下代码-
Create Control-
创建控制-
var legendControl = L.control({position: 'bottomleft'});
legendControl.addTo(mymap);
Remove Control-
删除控制-
legendControl.remove();
For more details refer/click here...
有关详细信息，请参阅/单击此处...
回答by LesLad
Despite the fact that this question was asked a year ago, I recently had to come up with a solution to a similar problem myself so feel as if I should share in case anybody else ends up here like I did.
尽管这个问题是在一年前提出的，但我最近不得不自己想出一个类似问题的解决方案，所以感觉好像我应该分享，以防其他人像我一样结束这里。
The L.control()object in Leaflet isn't technically a layer, and this is why trying to add and remove it some times doesn't work in the same way as for layers.
L.control()Leaflet 中的对象在技术上不是一个层，这就是为什么有时尝试添加和删除它与层的工作方式不同。
http://leafletjs.com/reference.html#icontrol
http://leafletjs.com/reference.html#icontrol
As the L.controlconstructor requires you only to "create all the neccessary DOM elements for the control", the HTML content of the divitself can be updated and deleted as and when required. Thus, to make a control feature appear and disappear from the map, and instead of adding and removing the L.controlobject, just adjust the HTML contents of the divcontained by it. An empty divwould result in no control feature being shown by the map.
由于L.control构造函数只要求您“为控件创建所有必需的 DOM 元素”，因此div可以在需要时更新和删除本身的 HTML 内容。因此，要使控件特征从地图中出现和消失，而不是添加和删除L.control对象，只需调整其div包含的 HTML 内容即可。空白div将导致地图不显示控制要素。
Thus the above snippet would become:
因此上面的代码片段将变成：
//construct control, initialize div
info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
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
};
}
//set div content to empty string; makes control disappear from map
info.getContainer().innerHTML='';
map.removeLayer(geojson);
geojson = L.geoJson(tracts, {style: blkNineStyle, onEachFeature: onEachFeature}).addTo(map);
//update content of control to make the control reappear
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');
};
}
//other cases...
if (two == false && black == true) {
//delete and update control where necessary
info.getContainer().innerHTML='';
