传单标记群集图标未显示

Question

我有一个问题，标记集群工作并显示集群中的项目数，但是图标不显示。当我放大时，会显示单个图标，但从远处看，群集图标不会显示。这是我在集群中设置数据的代码：

    // Marker cluster
    var producerLayer = new L.MarkerClusterGroup();
    // Loop through the lp array
    for (var i=0; i < lp.length; i++) {
        var name = lp[i][0];
        var place = lp[i][1];
        var lat = lp[i][2];
        var lng = lp[i][3];
        var liscence = lp[i][4];
        var risk = lp[i][5];

        var icon = greenIcon;

        var markerLocation = new L.LatLng(lat, lng);
        var marker = new L.Marker(markerLocation,  {icon});


        var content = '<div class="info_content">' +
                '<h3>' + name + '</h3>' +
                '<p>' + place + '</p>' +
                '<p>' + 'Date of initial liscencing: ' + liscence + '</p>' +
                '<p>' + 'Risk rating: ' + risk + '</p>';

        producerLayer.addLayer(marker);
        marker.bindPopup(content).openPopup();
    }

    producerLayer.addTo(map);

我在下面附上了我遇到的问题的图片。

Answer 1

看起来您只是缺少 Leaflet.markercluster 插件CSS 文件，如插件文档中所述：

\n

\n

[\xe2\x80\xa6]使用dist文件夹中的文件：

\n

\n
• MarkerCluster.css
\n
• MarkerCluster.Default.cssiconCreateFunction（如果您使用自己的而不是默认的则不需要）
\n
• leaflet.markercluster.js（或leaflet.markercluster-src.js对于非缩小版本）
\n

\n

\n

例如使用unpkg.comCDN：

\n

<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css">\n<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css">\n

\n