Leaflet 传单JS-将弹出窗口移动到侧面板

我一直在玩弹出窗口，结合JavaScript中包装的geojson，并且已经掌握了在bindpopup前端需要做什么。现在，我想有效地将弹出窗口从其标记中解除绑定，并使弹出窗口显示在侧面板中或其自己的div中的地图下方

这是我当前弹出窗口的代码，我猜我需要更改layer.bindPopup（popupContent）区域的代码，并将其引用到自己的div

    <script>
    var map = L.map('map').setView([51.4946, -0.7235], 11)
    var basemap =
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'OSM data',
    }).addTo(map);

    function onEachFeature(feature, layer) {
        var popupContent = "<b>" + feature.properties.ward_names +
                " </b><br>Population 2011 = <b>" + feature.properties.census_11 + 
                " </b><br>Population 2001 = <b>"+ feature.properties.census_01 +
                " </b><br>You can find out more about population data on the <a href='http://www.somewhere.com' target='_blank'>somewhere.com</a> website ";

        if (feature.properties && feature.properties.popupContent) {

            popupContent += feature.properties;
        }

        layer.bindPopup(popupContent);

    }
    L.geoJson([wardData], {
        style:  function (feature) {
            return { weight: 1.5, color: "#000000", opacity: 1, fillOpacity: 0 };
            return feature.properties;
        },
        onEachFeature: onEachFeature,
    }).addTo(map);
</script>

var map=L.map（'map'）.setView（[51.4946，-0.7235]，11）
var基线图=
L.tileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“OSM数据”，
}).addTo（地图）；
功能onEachFeature（功能，图层）{
var popupContent=“”+feature.properties.ward\u名称+
“
人口2011=“+feature.properties.census_11+
“
人口2001=“+feature.properties.census_01+
“
你可以在网站上找到更多关于人口数据的信息”；
if（feature.properties&&feature.properties.popupContent）{
popupContent+=feature.properties；
}
layer.bindPopup（弹出内容）；
}
L.geoJson（[wardData]{
风格：功能（特征）{
返回{权重：1.5，颜色：#000000，不透明度：1，填充不透明度：0}；
返回feature.properties；
},
onEachFeature:onEachFeature，
}).addTo（地图）；

然而，我真的不知道如何做到这一点，需要一些指导

干杯

---

Si

L.Control类是您想要做的事情的合适工具

---

我建议你遵循这一点，它会让你快速了解你可以用它做什么。

在另一个问题下分享的答案

如果您正在寻找填充另一个完全相同的元素 在地图之外定义，那么实际上您甚至不需要 整个信息控制。你可以很容易地在工作中做你需要的事情 onEachFeature>>图层。在>>上也单击零件

功能特性（特性，图层）{
分层({
单击：函数填充（）{
document.getElementById（'externaldiv'）。innerHTML=“BLAH BLAH BLAH”+feature.properties.name+”
“+feature.properties.description；
}
}); }

在html正文中，您只需确保将

或任何内容放置在您想要的位置

当用户单击地图时，此演示将填充外部地图 特色：

---

为指针欢呼。因此，我将教程示例放入html中，并使用firebug检查代码，我可以看到名为“this.\u div”的l.control元素（如果这是正确的术语），通过css将其放在地图的右上角。我在教程中删除了css，但“this.\u div.innerHTML”中的文本集仍然保留在地图的左侧。我尝试将div标记从'info'更改为'info2'，并将侧面板div引用为'info2'，但文本仍然位于右上角；有些地方我仍然无法解决这个问题，我只是不明白如何覆盖类和/或函数，将弹出窗口的内容放在地图的右上角。我在网上做了更多的研究，得到了一个使用getElementbyID调用的示例（），但是我似乎无法准确地了解它是如何工作的。不要重写函数，更改css。

function onEachFeature(feature, layer) {
    layer.on({
        click: function populate() {
            document.getElementById('externaldiv').innerHTML = "BLAH BLAH BLAH " + feature.properties.name + "<br>" + feature.properties.description;
        }
    }); }