传单Markercluster showCoverageOnHover触发错误

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

<!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中正确触发？

谢谢！

来源

2016-05-17 S.Ba

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

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

.mycluster { 
    overflow: hidden; 
}

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

注：问题还贴出Leaflet.markercluser GitHub的页面上为issue #677。

来源

2016-05-20 12:16:59 ghybs

非常感谢，这解决了我的问题！我会永远搜索这个解决方案！ –

传单Markercluster showCoverageOnHover触发错误

回答

相关问题