百度地图加载海量点

1、注册百度地图开放平台，在控制台内创建应用，申请ak。

2、新建页面html文件，将百度地图JavaScript API引入到页面。此处使用的ak为上一步创建应用申请的ak。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您申请的AK"></script>

3、在新建的页面添加一个div元素，用作百度地图实例化的容器。

<div id="map"></div>

4、编写js代码，实例化百度地图。

    var map = new BMap.Map("map", {});// 创建Map实例

    var a = 111.724456;

    var b = 31.578525;

    map.centerAndZoom(new BMap.Point(a, b), 5);     // 初始化地图,设置中心点坐标和地图级别

    map.enableScrollWheelZoom();                    //启用滚轮放大缩小

5、添加海量点生成方法，并添加到地图上。本文采用随机生成的点。

    // 随机1000个坐标点

    function theLocation()

    {

        map.clearOverlays();

        for (var i = 0; i < 1000; i++)

        {

            var new_point = new BMap.Point(a + getRandom(), b + getRandom());

            points.push(new_point);

        }

        var options = {

            size: BMAP_POINT_SIZE_SMALL,

            shape: BMAP_POINT_SHAPE_STAR,//点样式

            color: '#d340c3'

        }

        console.log(points);

        var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection

        pointCollection.addEventListener('click', function (e)

        {

            alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件

        });

        map.addOverlay(pointCollection);  // 添加Overlay

    }

    function getRandom()

    {

        return Math.random() / 2;

    }

6、调用海量点生成方法。但是，在此需要判断浏览器是否支持画布。

    if (document.createElement('canvas').getContext)//判断当前浏览器是否支持绘制海量点

    {

        theLocation();

    } else

    {

        alert('请在chrome、safari、IE8+以上浏览器查看本示例');

    }

7、保存代码，运行页面，实际效果如图：