从 GeoJSON 数据中为 div 分配 ID

Question

我有一些分配给 id 的 GeoJSON 数据，如下所示：

此数据的坐标值用于在 LeafletJS 中创建标记。我试图像这样将 id 分配给每个标记：

layer.markerID = feature.properties.id;

但是，我想将 GeoJSON 中的相同 id 分配给 div，最终将显示数据的其他方面，例如 "firstname" 和 "lastname." 这样，div id 和标记 id 将链接在一起，具体取决于单击的标记。因此，如果单击 id 为 99 的标记，则 div 中的数据（其 id 为 99）将对应于该标记。这个想法是这些id是动态生成的

我只是不太确定如何解决这个问题。任何帮助将不胜感激！

编辑：只是添加了一些额外的代码。以下是我如何为我的地图创建标记：

$.getJSON("json.php", function(json) {
    var testlayer = L.geoJson(json, {
      style: function (feature) {
        return feature.properties.style;
      },
      onEachFeature: function (feature, layer) {
        layer.markerID = feature.properties.id;
        layer.bindPopup("<strong>ID:</strong> " + feature.properties.id + "<br>" + "<strong>Name:</strong> " + feature.properties.firstname + " " + feature.properties.lastname);
      }
    })

Answer 1

您应该可以在 onEachFeature 函数中设置点击监听器。

onEachFeature: function (feature, layer) {
        layer.markerID = feature.properties.id;
        layer.bindPopup("<strong>ID:</strong> " + feature.properties.id + "<br>" + "<strong>Name:</strong> " + feature.properties.firstname + " " + feature.properties.lastname);
        layer.on({ click: whenClicked });
}

然后有一个在点击时被调用的函数：

function whenClicked(e) {
    // e = event
    console.log(e);
}

查看事件对象内部，它应该为您提供功能。

Answer 2

所以我终于弄明白了。这是我想出的办法，以防其他人遇到此问题。

onEachFeature: function (feature, layer) {
        layer.markerID = feature.properties.id;
        layer.bindPopup("<strong>ID:</strong> " + feature.properties.id + "<br>" + "<strong>Name:</strong> " + feature.properties.firstname + " " + feature.properties.lastname + "<br>" + "<strong>Location Details:</strong>" + " "  + feature.properties.locationDetails);
        layer.on({ click: slideData });
        function slideData(e){
          document.getElementById("box1").setAttribute("id", feature.properties.id);
          document.getElementsByClassName("fullName")[0].innerHTML = feature.properties.firstname + "&nbsp;" + feature.properties.lastname;
          document.getElementById("ageNumber").innerHTML = feature.properties.age;
        }

通过将所有内容保持在同一个函数中，我能够访问 JSON 并使用 document.getElementById 和 document.getElementsByClassName 方法将文本放入我想要的区域通缉。 :)

另外，感谢@Hinrich 的帮助！您的建议确实帮助我思考了问题并找到了解决方案。

从 GeoJSON 数据中为 div 分配 ID

Assigning ID to div from GeoJSON data

html

javascript

jquery

geojson

leaflet