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

      

  • 相关阅读:
    GLSL
    c++ 的垃圾收集(garbage collector
    ZZ 红黑树,并非想象中的那么复杂
    【转载】我心目中的android机器档次
    代码优化
    qqww
    solve Ax+By+C=0
    the c10k problem
    标 题: 腾讯面试题目(PHP程序员)
    zz 软件开发流程工具一览
  • 原文地址:https://www.cnblogs.com/xhrr/p/11268476.html
Copyright © 2011-2022 走看看