Question

我正在尝试将鼠标悬停事件添加到我的地图中：目的是当我将鼠标悬停在地图上时，在地图外的表格中显示一些多边形属性。但它似乎不起作用。有任何想法吗？我的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>

Answer 1

你不远......

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

Answer 2

实际上这是正确的解决方案，但我只是犯了一个简单的错误，修复它，我只是将表格放在JS tableupdate函数的前面并做了一个简单的调整然后它突然起作用了。像这样：

     <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
                });

    </script>

     <table>
            <tr><td id="cell">Hello</td></tr>
           </table>
    <script>
         tableupdate = function (props) {   
 document.getElementById("cell").innerHTML =  '<b>' + props.NAME + '</b>';

    </script>

    </html>

Leaflet - onEachFeature mouseover更新表的innerHTML

2 个答案: