ajax请求到后端数据后,遍历将所有经纬度以对象形式存放到数组。根据该数组遍历创建海量标注点
$.ajax({
url: `xxxxxxxxxxxxxxxxxx`,
method: 'get',
data: {longitude: xx, latitude: xx},
success: function(res){
var obj = {} //经纬度以对象形式通过obj存放到locat
var locat = [] //存放经纬度
var points = [] //存放点
if (document.createElement('canvas').getContext) {
res.chargers.forEach((ele, index)=>{
obj.x = ele.longitude
obj.y = ele.latitude
locat.push(obj)
console.log(locat)
points.push(new BMap.Point(locat[index].x, locat[index].y))
var options = {
shape: BMAP_POINT_SHAPE_SQUARE,
color: '#f00',
SizeType: BMAP_POINT_SIZE_HUGE,
label: res.chargers[0].id //为海量标注点定义label
}
var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
map.addOverlay(pointCollection); // 添加Overlay
pointCollection.addEventListener('click', function (e) {//点击标注点触发tap事件
var Content = "<div><span style='display:none;'>"+options.label+"</span></div>";
var Label = new BMap.Label(Content); // 创建label并设置label信息
map.openInfoWindow(Label,point);
})
});
} else {
alert('请用chrome、safari、IE8+以上浏览器查看');
}
},
dataType: 'json'
})