Leaflet 传单上画了大量的图标标记

我曾使用传单.js绘制了大约10000个图标标记，因为它是图标标记，所以我不能使用circleMarker。我找到了一个传单插件，它可以帮助我快速绘制10000个图标标记，但是这个插件导致了点击事件失败。 这是我的密码

var ciLayer = L.canvasIconLayer({}).addTo(leafletMap)
    var icon = L.icon({
    iconUrl: 'StructWell.png',
    iconSize: [20, 18],
    iconAnchor: [10, 9]
    });
    function markerClickHandler (e) {
        console.log(e)
        console.log()
    }
    let markers = []
    SiteList.results.forEach((site, i) => {
        var marker = L.marker([site.latitude, site.longitude], {icon: icon, title: JSON.stringify(site)})
        marker.on('click', markerClickHandler)
        // ciLayer.addMarker(marker)
        markers.push(marker);
    })
    ciLayer.addLayers(markers);

单击标记时，函数markerClickHandler不起作用。 是我做了一些错误，还是有更多的解决方案。关键是大量带有单击事件的图标标记。

---

谢谢

应按如下方式添加侦听器：

 ciLayer.addOnClickListener(function (e,data) {
      console.log(data)
 });

var-map=L.map（'map'）.setView（[59.9578,30.2987]，10）；
var tiles=L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；参与者”，
真的吗
}).addTo（地图）；
var ciLayer=L.canvasIconLayer（{}）.addTo（map）；
cLayer.addOnClickListener（函数（e，数据）{
console.log（数据[0].data.mydata）
});
var icon=L.icon({
伊克努尔：'https://img.icons8.com/metro/26/000000/marker.png',
iconSize:[20,18]，
iconAnchor:[10,9]
});
var标记=[]；
对于（变量i=0；i<10000；i++）{
var marker=L.marker（[58.5578+Math.random（）*1.8,29.0087+Math.random（）*3.6]，{icon:icon}）.bindpoop（“我是”+I）；
marker.mydata=“我是”+I
标记器。推（标记器）；
}
添加层（标记）
.map{
宽度：100%；
高度：100px；
}

为什么调用
ciLayer.addMarker（marker）
然后调用
ciLayer.addLayers（markers）？很抱歉我弄错了，代码
ciLayer.addMarker（marker）
是一个测试，但我删除了此代码，单击事件也不起作用哇，它起作用了，非常感谢。为什么事件处理程序param数据是一个数组，I console.log it，它有两个项目，它们看起来是一样的。@freddie.wang param数据包含标记的全部信息，其中包括所有标记属性和其他信息。它不仅有两个项目，还包含默认选项和用户定义的数据。