在海量点的collextion中添加点击监听
pointCollection.addEventListener('click', function (e) {
var SITEID = "";
var TITLE = "";
for (var i = 0; i < info.length; i++) {
// 遍历所有的点匹配点击的经纬度，添加需要的标签信息
if (info[i].lng == e.point.lng && info[i].lat == e.point.lat) {
SITEID = info[i].SITEID;
TITLE = info[i].TITLE;
break;
}
}
// 通过点击的坐标创建一个点对象，添加标签
var point = new BMap.Point(e.point.lng, e.point.lat);
var opts = {
title: "",
enableMessage: false,
}
var infowindow = new BMap.InfoWindow("SITEID：" + SITEID + "<br/>TITLE：" + TITLE, opts);
map.openInfoWindow(infowindow, point);
});
完整代码如下
d3.csv(('info.csv'), function (error, info) {
if (error) {
console.log(error);
}
else {
if (document.createElement('canvas').getContext) { // 判断当前浏览器是否支持绘制海量点
var points = []; // 添加海量点数据
for (var i = 0; i < info.length; i++) {
points.push(new BMap.Point(info[i].lng, info[i].lat));
}
var options = {
size: BMAP_POINT_SIZE_BIG,
shape: BMAP_POINT_SHAPE_CIRCLE,
color: '#999999'
}
var pointCollection = new BMap.PointCollection(points, options);
pointCollection.addEventListener('click', function (e) {
var SITEID = "";
var TITLE = "";
for (var i = 0; i < info.length; i++) {
if (info[i].lng == e.point.lng && info[i].lat == e.point.lat) {
SITEID = info[i].SITEID;
TITLE = info[i].TITLE;
break;
}
}
var point = new BMap.Point(e.point.lng, e.point.lat);
var opts = {
title: "", // 信息窗口标题
enableMessage: false,//设置允许信息窗发送短息
}
var infowindow = new BMap.InfoWindow("SITEID：" + SITEID + "<br/>TITLE：" + TITLE, opts);
map.openInfoWindow(infowindow, point);
});
map.addOverlay(pointCollection); // 添加Overlay
} else {
alert('请在chrome、safari、IE8+以上浏览器查看本示例');
}
}
}
)
