我在地图上使用leaflet-knn显示了标记,并且在右侧面板上显示了标记的名称。当我单击此列表时,我希望在相关的标记上显示弹出窗口。在右侧面板单击时,我必须传递所选文本,但如何显示呢?
这是我尝试过的代码。
var gjLayer = L.geoJson(testCities, {
onEachFeature: onEachFeature
});
function onEachFeature(feature, layer) {
layer.on('click', function(e) {
let feature = this.feature;
let content = "<b>Name:</b> " + feature.properties.name;
e.latlng.layer.bindPopup(content);
});
}
$(function() {
let res;
const distance = 10000;
const longitude = myloc.lng;
const latitude = myloc.lat;
res = leafletKnn(gjLayer).nearest(
[longitude, latitude], 5, distance);
for (i = 0; i < res.length; i++) {
var popup = res[i].layer.feature.properties;
map.addLayer(res[i].layer);
searchResult(popup);
}
function searchResult(result) {
item = '';
item = '<div class="item">' + '<div class="content">' + '<a class="header">' + result.name + '</a></div></div>';
$(".ui.list").append(item);
}
$('.content').on('click', function(e) {
let content = $(this).text();
onEachFeature(content);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div id="map"></div>
</div>
<div class="right-panel">
<h3>Nearby Search Result</h3>
<div id="results">
<div class="ui list"></div>
</div>
</div>
</div>