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

Question

我在地图上显示了 leaflet-knn 的标记，标记的名称显示在右侧面板的 div 上。当我单击此列表时，我想在相关标记上显示弹出窗口。我必须在右键面板单击时传递选定的文本，但我该如何显示。

这是迄今为止我已经尝试过的代码。

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>

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

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

How to display a popup in the marker?

html

javascript

jquery

knn

leaflet