Question

我现在一直在寻找好几个小时，我仍然被卡住了。我有一种感觉，这是一件容易/愚蠢的事情，我很想念。

我正在使用GitHub中的markercluster示例。我有两个不同的标记（只是2种不同的颜色），我想显示我将以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);
            }
        });

但我无法使其发挥作用。

我甚至尝试了其他地方的建议：

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

我仍然收到错误：未捕获TypeError：对象cmIcon没有方法'createIcon'

有人知道如何做到这一点吗？

非常感谢任何帮助。

提前谢谢。

Answer 1

您需要告诉MarkerClusterGroup如何创建图标。 marker cluster docs显示了一个像这样的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) {
        // decide which icon you want to use
        return (cluster.getChildCount() > 10) ? cmIcon : otherIcon;
    }
});

使用带有leaflet.js的geoJsonData和markercluster添加和使用marker变量

1 个答案: