帶自定義圖標的宣傳單集羣標記

Question

我已成功將我的標記集羣化。我現在想要做的是顯示一個自定義圖標，其中包含了集羣中的點數，但我無法弄清楚如何去做，或者甚至有可能。

我閱讀文檔，並理解我需要在創建標記集羣時實現自己的iconCreateFunction。

addSomeMarkers: function(data, markerProperties) { 
    var markers = L.markerClusterGroup({ 
     iconCreateFunction: function(cluster) { 
     // TODO 
     } 
    }); 
    .... 
} 

我知道我可以用自定義CSS類和cluster.getChildCount()返回L.divIcon，但我不能指定markerProperties.iconUrl作爲應顯示的圖像。 我也可以使用L.icon與我的自定義圖標markerProperties.iconUrl，但在這種情況下，我看不到應該如何顯示cluster.getChildCount()。

所以我需要的是兩者的結合。有沒有這樣的事情？如果沒有，有人可以提示一個解決方法來實現這一目標嗎？

Answer 1

使用這裏的例子：https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-custom.html

而且L.divIcon的文件是在這裏： http://leafletjs.com/reference.html#divicon

我想出了這個例子：http://franceimage.github.io/leaflet/8/?map=46.566414,2.4609375,6

希望它會幫助你

有意義的部分是：

var markerCluster = new L.MarkerClusterGroup({ 
    iconCreateFunction: function (cluster) { 
     var markers = cluster.getAllChildMarkers(); 
     var html = '<div class="circle">' + markers.length + '</div>'; 
     return L.divIcon({ html: html, className: 'mycluster', iconSize: L.point(32, 32) }); 
    }, 
    spiderfyOnMaxZoom: false, showCoverageOnHover: true, zoomToBoundsOnClick: false 
}); 

和CSS

.circle { 
    width: 32px; 
    height: 32px; 
    line-height: 32px; 
    background-image: url('circle.png'); 
    text-align: center; 
} 

可能有其他的方式...