传单标记群集图标未显示

【问题标题】：leaflet marker cluster icons not displaying传单标记群集图标未显示
【发布时间】：2018-04-17 10:42:27
【问题描述】：

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

    // 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);

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

【问题讨论】：

标签： leaflet leaflet.markercluster

【解决方案1】：

看起来您只是缺少 Leaflet.markercluster 插件CSS files，如plugin docs 所述：

[…] 使用dist 文件夹中的文件：

MarkerCluster.css

MarkerCluster.Default.css（如果您使用自己的 iconCreateFunction 而不是默认的，则不需要）

leaflet.markercluster.js（或 leaflet.markercluster-src.js 用于非缩小版）

例如使用unpkg.comCDN：

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

【讨论】：