百度地图API添加海量图标解决方案

采用百度地理信息可视化开源库mapv.js实现

以canvas形式绘画渲染海量图标，允许自定义图标点击事件及附加数据

参考文档：https://github.com/huiyan-fe/mapv/#readme

主要代码：

function run() {
            map.clearOverlays();
            let count = document.getElementById("txtNum").value * 1;
            img.src = 'station.png';        //图标图片
            data = [];
            let points = [];
            img.onload = function () {
                while (count--) {
                    let fanNum = parseInt(Math.random() * 100);
                    let lng = mapCenter.lng - 10 + Math.random() * 20;
                    let lat = mapCenter.lat - 6 + Math.random() * 12;
                    data.push({
                        geometry: {
                            type: 'Point',
                            coordinates: [lng, lat]
                        },
                        deg: 0,
                        icon: img,
                        text: fanNum.toString(),     //图标上方文字
                        tag: { fanNum: fanNum }      //附加信息对象
                    });
                    points.push(new BMap.Point(lng, lat));
                }
                let dataSet = new mapv.DataSet(data);
                let options = {
                    draw: 'icon',
                    methods: {
                        click: (s) => {             //图标点击事件
                            if (s && s.tag) {
                                let html = `<div>
                                                <p>经度: ${s.geometry.coordinates[0]}</p>
                                                <p>纬度: ${s.geometry.coordinates[1]}</p>
                                                <p>有缘人数量: ${s.tag.fanNum}</p>
                                            </div>`;
                                let infoWindow = new BMap.InfoWindow(html);
                                let bPoint = new BMap.Point(s.geometry.coordinates[0], s.geometry.coordinates[1]);
                                map.openInfoWindow(infoWindow, bPoint);
                            }
                        }
                    },
                    showText: true,
                    avoid: true,
                    size: 12,
                    font: '16px Arial',
                    fillStyle: 'red',
                    shadowColor: 'red',
                    shadowBlur: 0,
                    textOffset: { x: 0, y: -16 }   //文字显示的位置
                }
                let mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);  //显示海量图标
                map.setViewport(points);              //视角切换
            }
        }

实现效果：

补充

        如果你的图片加载后位置和预想的有偏差，可以添加偏移量进行设置，直接在 options 中添加 offset 设置即可：

                let options = {
                    draw: 'icon',
                    methods: {
                        click: (s) => {             //图标点击事件
                            if (s && s.tag) {
                                let html = `<div>
                                                <p>经度: ${s.geometry.coordinates[0]}</p>
                                                <p>纬度: ${s.geometry.coordinates[1]}</p>
                                                <p>有缘人数量: ${s.tag.fanNum}</p>
                                            </div>`;
                                let infoWindow = new BMap.InfoWindow(html);
                                let bPoint = new BMap.Point(s.geometry.coordinates[0], s.geometry.coordinates[1]);
                                map.openInfoWindow(infoWindow, bPoint);
                            }
                        }
                    },
                    showText: true,
                    avoid: true,
                    size: 12,
                    font: '16px Arial',
                    fillStyle: 'red',
                    shadowColor: 'red',
                    shadowBlur: 0,
                    textOffset: { x: 0, y: -16 },  //文字显示的位置
                    offset: { x: 5, y: 5 }  // 偏移量设置，根据不同图片加载效果调试修改
                }

demo打包下载：点我下载