4

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

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

干杯

硅

4

2 回答 2

2

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

如果您正在寻找完全填充您在地图之外定义的另一个元素，那么您实际上甚至不需要整个信息控件。您也可以在 onEachFeature >> layer.on >> click 部分轻松完成您需要的操作。

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/

于 2015-05-31T05:56:27.260 回答
1

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

我建议您按照本教程进行操作，它将让您快速了解可以用它做什么。

于 2013-06-15T13:08:32.083 回答