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

您只需在click事件上添加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);
})

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

1 个答案: