单张标记点击显示div

时间:2017-07-06 04:44:59

标签: javascript jquery leaflet geojson

我有一个jacascript代码,它从文件中加载geojson数据并显示circleMarkers(由于弹出窗口不起作用,无法显示正常标记)。

{
  $.ajax({
    dataType: "json",
    type: 'POST',
    url: "geojsonfile.php",
    beforeSend: function() {},
    success: function(data) {
      display = L.geoJson(data, {
        style: function(feature) {
          return {
            color: '#0515B5'
          };
        },
        pointToLayer: function(feature, latlng) {
          return new L.CircleMarker(latlng, {
            radius: 6,
            fillOpacity: 0.85
          });
        },
        onEachFeature: function(feature, layer) {
          layer.bindPopup("Name: " + feature.properties.name);
          document.getElementById("sname").innerHTML = feature.properties.name;
          layer.on({
            click: showData
          });

        }
      }).addTo(map);

    }
  }).error(function(xhr, status, error) {
    console.log(error);
  });

}

function showData(e) {
  $("#sdata").show();
}

要显示数据的html表是

<table  id="sdata">
  <tbody>
    <tr>
      <td> Name:</td>
      <td id="sname"></td>
    </tr>
  </tbody>
</table>

但问题是表格中只显示了geojson的最后一个值,是否可能会点击标记,因此会像标记弹出窗口一样显示sname中的值。

2 个答案:

答案 0 :(得分:2)

可能是这段代码

map.on('popupopen', function(e){ var marker = e.popup._source; });

会帮到你吗? 见:How to identify Leaflet's Marker during a `popupopen` event?

答案 1 :(得分:1)

弹出窗口应该可以工作,你应该将它们绑定到特征而不是图层。

layer.bindPopup("Name: " + feature.properties.name);

但是:

feature.bindPopup("Name: " + feature.properties.name);