Leaflet Markercluster showCoverageOnHover 触发错误

Question

我正在将 markerCluster 用于 Leaflet，并将 showCoverageOnHover 选项设置为 true。但是，在 Firefox (v 46.0.1) 中，事件 showCoverageOnHover 没有被正确触发，这意味着集群区域不仅在鼠标悬停在集群上时显示，而且在鼠标远离该集群时也会显示。基本上，我使用标准程序创建一个 markerClusterGroup，但具有自定义图标创建功能（使用 d3 绘制饼图）。我的代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">

#mapid {
    height: 60vh;
} 

</style>

<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />

<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/leaflet.markercluster.js'></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/MarkerCluster.css' rel='stylesheet' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<title>WorldMap</title>

<script type="text/javascript">

function defineClusterIcon(cluster) {

    var color = d3.scale.category20b();
    //some dummy json
    var myjson = '[{ "label":"Monday", "count": 15 },{ "label":"Tuesday", "count": 20 }]';
    var dataset = JSON.parse( myjson );
    var size = 40;
    var radius= size / 2;

    var svgres = document.createElementNS(d3.ns.prefix.svg, 'svg');
    var svg = d3.select(svgres).append('svg')
                .attr('width', size)
                .attr('height', size)
                .append('g')
                .attr('transform','translate(' + (size / 2) + ',' + (size / 2) + ')'); //center g 
    var arc = d3.svg.arc().outerRadius(radius);
    var pie = d3.layout.pie().value(function(d) {
        return d.count;
    }); 

    //create final chart
    svg.selectAll('path').data(pie(dataset)) //fill dataset into path
        .enter() //create placeholder for data
        .append('path') //fill placeholder with data in path
        .attr('d', arc) //define an attribute d
        .attr('fill', function(d, i) {
            return color(d.data.label);
        });

    var html = serializeXmlNode(svgres);

    var myIcon = new L.DivIcon({
        html : html,
        className : 'mycluster',
        iconSize : new L.Point(size, size)
    });
    return myIcon;
}

function serializeXmlNode(xmlNode) {
    if (typeof window.XMLSerializer != "undefined") {
        return (new window.XMLSerializer()).serializeToString(xmlNode);
    } else if (typeof xmlNode.xml != "undefined") {
        return xmlNode.xml;
    }
    return "";
}

</script>
</head>
<body>

<div id="mapid"></div>

<script type="text/javascript">

var map = L.map('mapid', { 
    center: [40, 40], 
    maxZoom : 10,
    zoom: 2 
}); 

//create markercluster
var markers = new L.markerClusterGroup({
    showCoverageOnHover: true, 
    iconCreateFunction: defineClusterIcon          
});

//some example markers
var marker = new L.marker([40.0,10.0]);
markers.addLayer(marker);

var marker = new L.marker([42.0,-12.0]);
markers.addLayer(marker);

var marker = new L.marker([50.0,30.0]);
markers.addLayer(marker);
map.addLayer(markers);

</script> 
</body>
</html>

知道为什么在 Firefox 中没有正确触发 showCoverageOnHover 事件吗？

谢谢！

Answer 1

看起来您创建的 SVG 元素溢出了 Leaflet 图标。

只需在您的图标上设置 overflow: hidden CSS 规则 class 似乎可以解决您的问题。

.mycluster {
  overflow: hidden;
}

已更新 JSFiddle：https://jsfiddle.net/sqeypmrn/1/

注意：问题也作为 issue #677.

发布在 Leaflet.markercluser GitHub 页面上

Leaflet Markercluster showCoverageOnHover 触发错误

Leaflet Markercluster showCoverageOnHover triggered wrong

javascript

d3.js

leaflet.markercluster