Question

在必应地图上创建图钉集群时遇到问题。我正在使用以下代码来显示图钉和群集：

var AllMarkers, map, infobox;
function LoadVehicleMarkers(MarkersData)
        {                
            var vehicles = [];
            vehicles = JSON.parse(MarkersData);

            AllMarkers=[];

            for (i = 0; i < vehicles.length; i++) {

                var data = vehicles[i];
                var col= data.folder;

                var iconPath= '../images/vehicles/'+col+'/truck.png';
                var pinName= 'pin'+i.toString();
                var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(data.lat, data.lng), {icon: iconPath, typeName: pinName});

                tooltip = new Microsoft.Maps.Infobox(pin.getLocation(), {
                    visible: false,
                    showPointer: false,
                    showCloseButton: false,
                    offset: new Microsoft.Maps.Point(-75, 10)
                });
                tooltip.setMap(map);

                infobox = new Microsoft.Maps.Infobox(pin.getLocation(), {
                    visible: false
                });
                infobox.setMap(map);

                pin.metadata = {
                    title: data.title,
                    description: data.infowindow
                };

                Microsoft.Maps.Events.addHandler(pin, 'click', pushpinClicked);
                Microsoft.Maps.Events.addHandler(pin, 'mouseover', VehiclepinHovered);
                Microsoft.Maps.Events.addHandler(pin, 'mouseout', closeTooltip);

                map.entities.push(pin);

                AllMarkers.push(pin);
            }

            Microsoft.Maps.loadModule('Microsoft.Maps.Clustering', function () {

                clusterLayer = new Microsoft.Maps.ClusterLayer(AllMarkers, {
                    clusteredPinCallback: createCustomClusteredPin,
                    gridSize: 80
                });
                map.layers.insert(clusterLayer);
            });


        }
function createCustomClusteredPin(cluster) {
        var minRadius = 12;
        var outlineWidth = 7;
        var clusterSize = cluster.containedPushpins.length;
        var radius = Math.log(clusterSize) / Math.log(10) * 5 + minRadius;
        var fillColor = 'rgba(255, 40, 40, 0.5)';
        if (clusterSize < 10) {
             fillColor = 'rgba(20, 180, 20, 0.5)';
        }
        else if (clusterSize < 100) {
           fillColor = 'rgba(255, 210, 40, 0.5)';
        }
        var svg = ['<svg xmlns="http://www.w3.org/2000/svg" width="', (radius * 2), '" height="', (radius * 2), '">',
            '<circle cx="', radius, '" cy="', radius, '" r="', radius, '" fill="', fillColor, '"/>',
            '<circle cx="', radius, '" cy="', radius, '" r="', radius - outlineWidth, '" fill="', fillColor, '"/>',
            '</svg>'];

        cluster.setOptions({
            icon: svg.join(''),
            anchor: new Microsoft.Maps.Point(radius, radius),
            textOffset: new Microsoft.Maps.Point(0, radius - 8) 
        });
    }

现在我得到的是一张装有计数的聚类的地图，但是图钉仍然可见（如下图所示）

Map Screen Shot

请帮助我。我只想为车辆图钉创建群集。任何帮助，将不胜感激。

在bing地图上创建集群时可见图钉

0 个答案: