Question

我尝试使用sidebar plugin制作地图。我可以用＃34;演示示例＆＃34;制作一个包含许多标记和插件的地图，但我不知道，如何创建一个动态的＆＃34;滑动条中的内容，分别显示每个标记的属性。

我的简单代码：

<script>
var map = L.map('map');

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; OpenStreetMap contributors'
}).addTo(map);

var sidebar = L.control.sidebar('sidebar', {
    closeButton: true,
    position: 'left'
});
map.addControl(sidebar);
sidebar.setContent('aaaaaaa');   

setTimeout(function () {
    sidebar.show();
}, 500);
var marker = L.marker([49.46, 17.11]).addTo(map).on('click', function () {
    sidebar.toogle()
    marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
sidebar.setContent('aaaaaaa');   

    map.on('click', function () {
        sidebar.hide();
    });
});

map.setView([49, 17], 5);

Answer 1

您需要手动创建内容，并在每次数据更改时更新侧边栏，请检查this example。

首先，创建一个更新数据的函数，您可以使用map.eacheLayer获取所有图层，如下所示：

function updateDataInSidebar() {
    var newData = '<div id="layer-data">';
    map.eachLayer(function (layer) { 
        if (layer.options.id) {
            newData += 'Marker' + layer.options.id + '<br />'; 
        }
    });
    sidebar.setContent(newData + '</div>')
}

您可以在选项中存储任意数据，如下所示：

marker = createMarker(lat, lng);
marker.options.id = '123';

您可以使用选项中存储的数据填充侧边栏，以获取标记的当前位置，用户getLatLng;

Leaflet侧栏中的动态内容

1 个答案: