zoukankan      html  css  js  c++  java
  • 百度地图-海量点标注-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'
        })
    

      

  • 相关阅读:
    构造与析构的次序
    为什么析构函数常声明为虚函数
    偏移数组的二分查找
    字符串循环右移N位
    const 补充
    对类 sizeof
    指针与引用
    python小练习
    初学数据挖掘——相似性度量(一)
    每天进步一点点(二)
  • 原文地址:https://www.cnblogs.com/xhrr/p/11268476.html
Copyright © 2011-2022 走看看