Leafletjs - 将弹出窗口移动到侧面板

Question

我一直在玩弹出窗口，结合 JavaScript 中封装的 geojson，并掌握了我需要在 bindpopup 前端做的事情。现在我想有效地将​​弹出窗口与其标记解除绑定(bind)，并让弹出窗口出现在侧面板或 map 下方的自己的 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>

但是，我不确定如何执行此操作，需要一些指导。

干杯

硅

Answer 1

在另一个问题下共享答案，https://gis.stackexchange.com/a/144501/44746

If you're looking for populating another element entirely that you've defined outside of the map, then you actually don't need even the whole info control. You can just as easily do what you need in the onEachFeature >> layer.on >> click part too.

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

In your html body, you just have to make sure your <div
id="externaldiv"> or whatever is placed where you want it.

This demo populates an external when the user clicks on a map feature : http://labs.easyblog.it/maps/leaflet-geojson-list/