百度地图聚合点自定义样式

官方demo:http://lbsyun.baidu.com/jsdemo.htm#c1_4

上手很简单，主要是利用第三方js包（TextIconOverlay和MarkerClusterer）实现的。其中TextIconOverlay负责样式展示，MarkerClusterer负责聚合点逻辑计算。api地址：http://api.map.baidu.com/library/TextIconOverlay/1.2/docs/help.html

简单的展示还是很好用，但是实际工作中，需要展示自定义文字，看完api后发现并不能满足实际需求。没办法，只能尝试着看看源码怎么实现的，于是从http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js和http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer.js拷贝源码到本地。

在MarkerClusterer.js中发现代码：

Cluster.prototype.updateClusterMarker = function () {
        if (this._map.getZoom() > this._markerClusterer.getMaxZoom()) {
            this._clusterMarker && this._map.removeOverlay(this._clusterMarker);
            for (var i = 0, marker; marker = this._markers[i]; i++) {
                this._map.addOverlay(marker);
            }
            return;
        }

        if (this._markers.length < this._minClusterSize) {
            this._clusterMarker.hide();
            return;
        }

        this._clusterMarker.setPosition(this._center);
        
        this._clusterMarker.setText(this._markers.length);

        var thatMap = this._map;
        var thatBounds = this.getBounds();
        this._clusterMarker.addEventListener("click", function(event){
            thatMap.setViewport(thatBounds);
        });

    };

注意到代码：

this._clusterMarker.setText(this._markers.length);

　　

于是更改为：

this._clusterMarker.setText('自定义文字'+this._markers.length);

然后前端报错：

TypeError: Cannot read property 'url' of undefined
at BMapLib.TextIconOverlay.TextIconOverlay._buildCssText

于是去TextIconOverlay.js文件注意到代码：

 TextIconOverlay.prototype._updateCss = function () {
        var style = this.getStyleByText(this._text, this._styles);
        this._domElement.style.cssText = this._buildCssText(style);
        console.log(this._domElement.style.cssText);
    };

　　这里使用getStyleByText方法拿到的style为null,再看：

TextIconOverlay.prototype.getStyleByText = function (text, styles) {
        var count = parseInt(text);
        var index = parseInt(count / 10);
        index = Math.max(0, index);
        index = Math.min(index, styles.length - 1);
        return styles[index];
    }

　　发现如果text为字符串时，很大概率会报NAN的错，导致style拿到为null,修改代码如下：

TextIconOverlay.prototype.getStyleByText = function (text, styles) {
        var count = 0;
        if (typeof text == 'number') {
            count = parseInt(text);
        }
        if (typeof text == 'string') {
            count = text.replace(/[^0-9]/ig, "");
        }
        var index = parseInt(count / 10);
        index = Math.max(0, index);
        index = Math.min(index, styles.length - 1);
        return styles[index];
    }

　　

 这里根据自己的需求修改代码。我这样改代码是因为自定义字符串中没有数字，如果有数字这样改就不合适了。

这里再提供另外一种思路：TextIconOverlay其实就是一个自定义的Overlay。还可以自定义一个Overlay，结合MarkerClusterer.js完成。有兴趣的朋友可以尝试下。