百度地图-海量点标注-label的添加

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'
    })