Leaflet 添加并使用标记变量geoJsonData和markercluster与lapper.js

我已经找了好几个小时了，但我还是被卡住了。我觉得我错过了一些简单/愚蠢的事情

我使用的是来自GitHub的markercluster示例。我有两个不同的标记（仅仅是两种不同的颜色），我想展示我将以json格式定义的标记。 我已经按照传单网站的指南定义了不同的标记。 我将变量添加到json部分，但我不知道如何使映射加载不同的标记。它要么不给我地图，要么给我错误；或者它仍然使用默认的蓝色标记

这是我的密码：

<script type="text/javascript">

        var geoJsonData = {
            "type": "FeatureCollection",
            "features": [
                { "type": "Feature", "id":"1", "properties": { "address": "2","marker": "cmIcon"}, "geometry": { "type": "Point", "coordinates": [175.2209316333,-37.8210922667 ] } },
                { "type": "Feature", "id":"2", "properties": { "address": "151","marker": "otherIcon" }, "geometry": { "type": "Point", "coordinates": [175.2238417833,-37.80975435   ] } },
                { "type": "Feature", "id":"3", "properties": { "address": "21","marker": "cmIcon"  }, "geometry": { "type": "Point", "coordinates": [175.2169955667,-37.818193     ] } },
                { "type": "Feature", "id":"4", "properties": { "address": "14","marker": "otherIcon"  }, "geometry": { "type": "Point", "coordinates": [175.2240856667,-37.8216963    ] } },
                { "type": "Feature", "id":"5", "properties": { "address": "38B","marker": "cmIcon" }, "geometry": { "type": "Point", "coordinates": [175.2196982333,-37.8188702167 ] } },
                { "type": "Feature", "id":"6", "properties": { "address": "38","marker": "otherIcon"  }, "geometry": { "type": "Point", "coordinates": [175.2209942   ,-37.8192782833 ] } }
            ]
        };

        var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
            key: 'BC9A493B41014CAABB98F0471D759707'
        });

        var LeafIcon = L.Icon.extend({
            options: {
                shadowUrl: 'marker/marker-shadow.png',
                iconSize:     [32, 32],
                shadowSize:   [36, 20],
                iconAnchor:   [22, 94],
                shadowAnchor: [4, 62],
                popupAnchor:  [-3, -76]
            }
        });

        var cmIcon = new LeafIcon({iconUrl: 'marker/marker-cm.png'}),
            otherIcon = new LeafIcon({iconUrl: 'marker/marker-others.png'});

        var map = L.map('map')
                .addLayer(cloudmade);

        var markers = new L.MarkerClusterGroup();

        var geoJsonLayer = L.geoJson(geoJsonData, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.address);
            }
        });
        markers.addLayer(geoJsonLayer);

        map.addLayer(markers);
        map.fitBounds(markers.getBounds());

        function onLocationFound(e) {
                    var radius = e.accuracy / 2;

                    L.marker(e.latlng).addTo(map)
                        .bindPopup("Vous etes ici").openPopup();

                    L.circle(e.latlng, radius).addTo(map);
                }

                function onLocationError(e) {
                    alert(e.message);
                }

                map.on('locationfound', onLocationFound);
                map.on('locationerror', onLocationError);

                map.locate({setView: true, maxZoom: 16});
    </script>

但我不能让它工作

我甚至按照建议在其他地方尝试：

var geoJsonLayer = L.geoJson(geoJsonData, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.address),
layer.setIcon(feature.properties.marker);
            }
        });

我仍然收到一个错误：未捕获类型错误：对象cmIcon没有方法“createIcon”

有人知道怎么做吗

任何帮助都将不胜感激

---

提前感谢。

您需要告诉MarkerClusterGroup如何创建图标。显示一个具有如下DivIcon的示例：

var markers = new L.MarkerClusterGroup({
    iconCreateFunction: function(cluster) {
        return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
    }
});

var markers = new L.MarkerClusterGroup({
    iconCreateFunction: function(cluster) {
        return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
    }
});

var markers = new L.MarkerClusterGroup({
    iconCreateFunction: function(cluster) {
        // decide which icon you want to use
        return (cluster.getChildCount() > 10) ? cmIcon : otherIcon;
    }
});