Question

我一直在玩弹出窗口，结合一个包含在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>

但是我不确定如何做到这一点并需要一些指导。

欢呼声

的Si

Answer 1

L.Control类是您想要做的适当工具。

我建议你按照tutorial进行操作，它会让你快速了解你可以用它做什么。

Answer 2

根据另一个问题https://gis.stackexchange.com/a/144501/44746

分享的答案

如果你正在寻找完全填充另一个元素，那就是你在地图之外定义，然后你实际上甚至不需要整个信息控制。你可以轻松地做你需要的东西 onEachFeature＆gt;＆gt; layer.on＆gt;＆gt;点击部分。

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

在您的html正文中，您只需确保将<div id="externaldiv">或其他任何内容放置在您想要的位置。

当用户点击地图时，此演示会填充外部信息   功能：http://labs.easyblog.it/maps/leaflet-geojson-list/

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

2 个答案: