如何在标记中显示弹出窗口？

Question

我在地图上使用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>

- S S

Answer 1

您可以在单击事件上简单地添加L.popup()。之后可能需要稍后添加一些样式。

$('.content').on('click', function(e) {
    let content = $(this).text();
    let your_location= new L.LatLng(-42.8585,147.2468);

    var popup = L.popup()
        .setLatLng(your_location)
        .setContent('<p>Hello world!<br />This is a nice popup.</p>')
        .openOn(map);
})

- nas