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个坐标点 funct足毂忍珩ion 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、保存代码，运行页面，实际效果如图：
