console 命令行工具 X clear
console
<!DOCTYPE HTML>
<html>

<head>
    <title>加载海量点</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style type="text/css">
    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
    }

    #map {
        width: 100%;
        height: 100%;
    }

    #panel {
        position: absolute;
        top: 30px;
        left: 10px;
        z-index: 999;
        color: #fff;
    }

    #login {
        position: absolute;
        width: 300px;
        height: 40px;
        left: 50%;
        top: 50%;
        margin: -40px 0 0 -150px;
    }

    #login input[type=password] {
        width: 200px;
        height: 30px;
        padding: 3px;
        line-height: 30px;
        border: 1px solid #000;
    }

    #login input[type=submit] {
        width: 80px;
        height: 38px;
        display: inline-block;
        line-height: 38px;
    }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密匙"></script>
    <script type="text/javascript" src="http://lbsyun.baidu.com/jsdemo/data/points-sample-data.js"></script>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript">
    var map = new BMap.Map("map", {}); // 创建Map实例
    map.centerAndZoom(new BMap.Point(105.000, 38.000), 5); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(); //启用滚轮放大缩小
    if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
        var points = [
            [],
            []
        ]; // 添加海量点数据
        for (var i = 0; i < 100; i++) {
            points[0].push(new BMap.Point(data.data[i][0], data.data[i][1]));
        }

        for (var i = 100; i < 200; i++) {
            points[1].push(new BMap.Point(data.data[i][0], data.data[i][1]));
        }
        var options1 = {
            size: BMAP_POINT_SIZE_SMALL,
            color: 'rgba(0, 0, 255, 0.3)'
        }
        var options2 = {
            size: BMAP_POINT_SIZE_SMALL,
            color: 'rgba(255, 0, 0, 0.3)'
        }
        var pointCollection1 = new BMap.PointCollection(points[0], options1);
        var pointCollection2 = new BMap.PointCollection(points[1], options2); // 初始化PointCollection
        pointCollection1.addEventListener('click', function(e) {
            alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat); // 监听点击事件
        });
        pointCollection2.addEventListener('click', function(e) {
            alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat); // 监听点击事件
        });
        map.addOverlay(pointCollection1); // 添加Overlay
        map.addOverlay(pointCollection2); // 添加Overlay
    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }
    </script>
</body>

</html>