百度地圖-海量點標注-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'
    })