• 百度地图-海量点标注-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'
        })
    

      

  • 相关阅读:
    c++看题
    理想化
    thin mission
    编程时 和 thinking
    tiny mission 2021 10 20
    A Magic Lamp HDU
    Poj 3370
    鸽巢原理(抽屉原理)
    Miller-Rabin质数测试
    Nim or not Nim? HDU
  • 原文地址:https://www.cnblogs.com/xhrr/p/11268476.html
Copyright © 2020-2023  润新知