传单Markercluster showCoverageOnHover触发错误

Leaflet Markercluster showCoverageOnHover triggered wrong

本文关键字：错误 showCoverageOnHover Markercluster 传单      更新时间：2023-09-26

我正在为传单使用markerCluster，showCoverageOnHover选项设置为true。然而，在Firefox（v46.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>

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

谢谢！

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

简单地在图标类上设置overflow: hiddenCSS规则似乎可以解决您的问题。

.mycluster {
  overflow: hidden;
}

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

注意：这个问题也发布在传单.markrcuser GitHub页面上，发布号为#677。

相关文章：