麻数图（Number Cluster）

有一千个点，可以使用麻点图（Marker Cluster）；当有一万个点时，用麻点图会卡死浏览器，怎么办？所以我开发了麻数图。

by sink cup

HTML

<script src="http://webapi.amap.com/maps?v=1.2&amp;key=c1bd24ebbba2cdd8d6e0f129c71e8d76"></script>
<script src="http://map.qq.com/api/js?v=2.exp"></script>
<script src="https://cdn.rawgit.com/sinkcup/maps-number-cluster/0.1.1/src/number_cluster.js"></script>
<script src="https://cdn.rawgit.com/sinkcup/maps-number-cluster/0.1.1/src/adapters/amap.js"></script>
<script src="https://cdn.rawgit.com/sinkcup/maps-number-cluster/0.1.1/src/adapters/qq.js"></script>
<!--地图容器-->
<div style="width:100%;height:640px;border:#ccc solid 1px;" id="maps"></div>

JavaScript

var numbers = [
    {
        "lng" : 121.44,
        "lat" : 31.32,
        "number" : 5
    },
    {
        "lng" : 121.44,
        "lat" : 31.35,
        "number" : 1
    },
    {
        "lng" : 121.47,
        "lat" : 31.20,
        "number" : 19
    },
    {
        "lng" : 121.47,
        "lat" : 31.23,
        "number" : 4848
    },
    {
        "lng" : 121.47,
        "lat" : 31.26,
        "number" : 21
    },
    {
        "lng" : 121.50,
        "lat" : 31.23,
        "number" : 385
    }
];
var numberCluster = new maps.NumberCluster({
    "center" : {
        "lng" : 121.47,
        "lat" : 31.23
    },
    "containerId" : "maps",
    "adapters" : {
        "amap" : "高德",
        "qq" : "腾讯"
    },
    "adaptersSwitch" : {
        "show" : true,
        "changeHash" : true,
        "id" : "mapsAdaptersSwitch"
    },
    "defaultAdapter" : "amap"
});
numberCluster.addNumbers(numbers);