0

我一直在寻找几个小时和几个小时，但我仍然被困住了。我有一种感觉，我错过了一些简单/愚蠢的事情。

我正在使用来自 GitHub 的 markercluster 的示例。我有 2 个不同的标记（只是 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);
            }
        });

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

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

任何帮助将不胜感激。

先感谢您。

4

1 回答 1

0

您需要告诉 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) {
        // decide which icon you want to use
        return (cluster.getChildCount() > 10) ? cmIcon : otherIcon;
    }
});
于 2013-10-10T01:54:05.603 回答