gpt4 book ai didi

javascript - Leaflet - onEachFeature 鼠标悬停更新表格的 innerHTML

转载 作者:行者123 更新时间:2023-11-30 12:34:50 25 4
gpt4 key购买 nike

我正在尝试将鼠标悬停事件添加到我的 map :目的是当我将鼠标悬停在 map 上时,在 map 外的表格中显示一些多边形属性。但这似乎不起作用。有任何想法吗?我的 JS 知识很差,我认为它可能适用于这样的代码:

<html>
...
<script>
function mouseoverfunction(e) {
var layer = e.target;
tableupdate(layer.feature.properties);
}


function mouseoutfunction(e) {
tableupdate();
}


function onEachFeature(feature, layer) {
layer.on({
mouseover: mouseoverfunction,
mouseout: mouseoutfunction
});


tableupdate = function (props) {
document.getElementById("cell").innerHTML = (props ?
'<b>' + props.NAME + '</b>' : 'Other Table Text');

</script>
<table>
<tr><td id="cell">Hello</td></tr>
</table>
</html>

最佳答案

你不远了......

layer.feature.properties 是一个对象(关联数组)

要枚举属性,你需要

var properties = e.target.feature.properties;
for (var prop in properties) {
if (properties.hasOwnProperty(prop)) {
console.log("prop: " + prop + " value: " + properties[prop]);
}
}

看看这个JSFiddle

关于javascript - Leaflet - onEachFeature 鼠标悬停更新表格的 innerHTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26381376/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com