小冊子中的側邊欄中的動態內容

我正嘗試使用sidebar plugin創建地圖。我可以製作一個包含許多標記和「演示示例」插件的地圖，但是我不知道如何在滑動條中創建一個「動態」內容，以分別顯示每個標記的屬性。小冊子中的側邊欄中的動態內容

我簡單的代碼：

<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);

來源

2016-12-25 Jakub Kohn

您需要手動創建的內容，而且每次更新的側邊欄的數據變化，檢查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;

來源

2016-12-25 15:30:51

它看起來更好理解，但你可以添加函數「updateDataInSidebar」到兩個標記的例子嗎？因爲我是一個小喇嘛:-)謝謝 –

該功能將地圖中的所有標記，檢查鏈接，並看到在我的例子中，它顯示在邊欄中的兩個標記。 –

@JakubKohn另一種選擇是將所有標記存儲在數組中，並在更新函數中使用該數組。 –

小冊子中的側邊欄中的動態內容

回答

相關問題