Question

我使用geoJSON在地图上绘制了许多点。单击某个点时，地图会缩放到该点并在另一个div中提取一些信息。当我在mouseover事件上放置一个弹出窗口时，我的点击功能不再有效。

这是我的点击功能：

function fillInfo(e) {
        var layer = e.target; 

        document.getElementById('infoBox').innerHTML = '<h2>' + layer.feature.properties.name + '</h2>' + '<h3>' +  layer.feature.properties.address + '</h3></p>'
        }
        //Variable to set zoom level on click
        var southLat = layer.feature.geometry.coordinates[0] + .022438;
        var southLong = layer.feature.geometry.coordinates[1] - .003235;

        var northLat = layer.feature.geometry.coordinates[0] - .022438;
        var northLong = layer.feature.geometry.coordinates[1] + .003235;

        map.fitBounds([[southLong, southLat], [northLong, northLat]]);


    }

这是我的鼠标悬停功能：

        function highlightFeature(e) {
        var layer = e.target; 

        layer.bindPopup(layer.feature.properties.name)
            .openPopup();


        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });



        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }

    }

我在这里打电话给他们：

    function onEachFeature(feature, layer) {
        layer.on({
            click: fillInfo,
            mouseover: highlightFeature,
            mouseout: resetHighlight
        });
    }

这使得弹出窗口在翻转时工作正常，但该点不再响应点击事件。

Answer 1

弹出窗口有一个偏移属性，默认设置为[0,6]，因此弹出窗口覆盖了该点（包含白色向下箭头的节点大于箭头），你将会无法点击该点。

设置弹出窗口的偏移量选项：

layer.bindPopup(layer.feature.properties.name,{offset:new L.Point(0,0)})
 .openPopup();

提供给L.Point的第二个参数是重要的y坐标，减少此参数以向上移动弹出窗口。

mouseover上的leaflet popup删除click事件

1 个答案: