百度地图 - 绘制海量点

步骤1. 需要判断浏览器是否支持绘制海量点

// 判断当前浏览器是否支持绘制海量点
if (document.createElement('canvas').getContext) {
    var p =new BMap.Point(yljgpoints[i]['lnt'],yljgpoints[i]['lat']);
	p.id =yljgpoints[i]['id']; //给每个海量点加了一个id 因为每个海量点都有一个弹窗
	points.push(p);
} else {
	layer.msg("所有搜索结果的位置显示需要在chrome、safari、IE8+以上浏览器查看");
}

步骤2. 添加海量点到地图上

var pointCollectionYl = null;  // 全局变量 海量点的集合
//海量点的属性
var options = { 
	size: BMAP_POINT_SIZE_SMALL,
	shape: BMAP_POINT_SHAPE_RHOMBUS,  //菱形 
	color: '#ee0c0c'  // 颜色
	};
// 绘制点之前移除
map.removeOverlay(pointCollectionYl);
pointCollectionYl = new BMap.PointCollection(points, options);  // 初始化海量点的集合
map.addOverlay(pointCollectionYl);  // 添加Overlay
// 接下来就可以给海量点添加点击事件
pointCollectionYl.addEventListener('click', function (e) {
});

3. 示例生成海量点的完整代码

 if (document.createElement('canvas').getContext)//判断当前浏览器是否支持绘制海量点
 {
   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'
   }
   var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
   pointCollection.addEventListener('click', function (e) {
     alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
   });
   map.addOverlay(pointCollection);  // 添加Overlay
 } else {
     alert('请在chrome、safari、IE8+以上浏览器查看本示例');
 }
 function getRandom() {
   return Math.random() / 2;
 }

4. 给覆盖物添加id

// 这里是根据lb生成的icon
var yljgPointIcon = new BMap.Icon("${rc.contextPath}/static/image/icon-lb" + (yljgpoints[i].lx) + ".png", new BMap.Size(35, 35), {
      imageSize: new BMap.Size(35, 35)
    });
var cityPointmarker = new BMap.Marker(new BMap.Point(yljgpoints[i]['lnt'], yljgpoints[i]['lat']), {
      icon: yljgPointIcon,
      offset: new BMap.Size(9, -17),
      title: yljgpoints[i]["dept_name"],
    });
	cityPointmarker.id = yljgpoints[i]['id'];  // 给覆盖物添加id
map.addOverlay(cityPointmarker);

 // 可以通过 e.target.id 获取覆盖物的id
 cityPointmarker.addEventListener('click', function (e) {
 	console.log(e.target.id)
 }