采用百度地理信息可视化开源库mapv.js实现
以canvas形式绘画渲染海量图标，允许自定义图标点击事件及附加数据
参考文档：/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打包下载：点我下载
