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

【问题标题】：How to display a popup in the marker?如何在标记中显示弹出窗口？
【发布时间】：2018-08-21 16:09:41
【问题描述】：

我在地图上显示了传单 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>

【问题讨论】：

标签： javascript jquery html leaflet knn

【解决方案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);
})

【讨论】：