功能点
自定义图片标记点，多个样式不同的lable
点击点展示弹窗，展示图片和录音播放暂停
let img = require('./img/num-bg.png')若使用背景图需要这样引入，然后使用变量
list:[{name:'小曲组织',value:[112.991735, 28.26299],icon: require("./components/img/point-red1.png"),click: true // 是否点击弹窗}]// 地图上覆盖点/自定义图标/点击点弹窗显示信息this.list.forEach(item => {// 1、指定坐标放置自定义图标var myIcon = new BMapGL.Icon(item.icon, new BMapGL.Size(this.fontSize(0.4), this.fontSize(0.4)));var marker = new BMapGL.Marker(new BMapGL.Point(...item.value), {icon: myIcon});map.addOverlay(marker); // 2、图标下面添加lable文字描述var opts = {position: new BMapGL.Point(...item.value), // 指定文本标注所在的地理位置offset: new BMapGL.Size(this.fontSize(0), this.fontSize(0.25)) // 设置文本偏移量};// 自定义文本：创建文本标注对象if (item.name) {// 添加员工数量显示//let img = require('./img/num-bg.png') // 若使用背景图需要这样引入，然后使用变量var label = new BMapGL.Label(`<div class="flex1"><b class="${item.num && item.num != 0 ? 'show' : 'hide'}" style="background-color:red;border-radius: 10px; color: #fff; padding:2px 4px 3px; font-size: .0833rem;">${item.num}</b>${item.name}</div>`, opts);// 自定义文本标注样式label.setStyle({color: '#1a73e8',borderColor: 'transparent',backgroundColor: "transparent",fontSize: this.fontSize(0.13) + 'px',height: this.fontSize(0.25) + 'px',lineHeight: this.fontSize(0.22) + 'px',fontFamily: '微软雅黑',transform: 'translateX(-50%)'});map.addOverlay(label);}//3、 添加点击事件弹窗事件if (item.click) {// 创建图文信息窗口var opts = {width: 450,// 信息窗口宽度height: 'auto',// 信息窗口高度}var sContent = `<div class="pb-20"><div class="flex_l white" style="margin-top:-10px"><h3 class="bold">${item.serviceObjectName || ''}</h3><div style="display:${item.serviceObjectType == 0 ? 'block' : 'none'};color:#fff;background:#67c23a;padding:4px 12px;border-radius:6px;margin-left:20px">保障</div><div style="display:${item.serviceObjectType == 1 ? 'block' : 'none'};color:#fff;background:#409eff;padding:4px 12px;border-radius:6px;margin-left:20px">社会</div></div><div style="margin-bottom:5px">服务组织：${item.providerName || ''}</div><div style="display:flex;width: 100%;margin-bottom:5px"><div style="flex:1">服务内容：${item.requireDescripe || ''}</div><div style="flex:1;display:${item.staffName ? 'block' : 'none'}">服务员工：${item.staffName || ''}</div></div><div style="display:flex;width: 100%;margin-bottom:5px"><div style="flex:1;display:${item.signTime ? 'block' : 'none'}">签到时间：${item.signTime || ''}</div><div style="flex:1;display:${item.endTime ? 'block' : 'none'}">签退时间：${item.endTime || ''}</div></div><div style="margin-bottom:5px">服务地址：${item.address || ''}</div><div style="display:flex;width: 100%;margin-bottom:5px"><div style="flex:1;height:100px;line-height:100px; display:${item.signPic ? 'block' : 'none'}"><span>签到首图：</span><viewer><img style="width:100px;height:100px;vertical-align: middle;" src="${item.signPic}" alt=""/></viewer></div><div style="flex:1;height:100px;line-height:100px; display:${item.endPic ? 'block' : 'none'}"><span>签退首图：</span><img style="width:100px;height:100px;vertical-align: middle;" src="${item.endPic}" alt=""/></div></div><div style="display:${item.callRecord ? 'block' : 'none'}"><div style="height:30px;line-height:30px;" class="flex_l"><span>通话录音：</span><audioid='audio'src='${item.callRecord}'preload='metadata'></audio><i id="icon1" class="el-icon-video-play pointer size-20" οnclick="play(1)"></i><i id="icon2" style="display:none" class="el-icon-video-pause pointer size-20" οnclick="play(2)"></i></div></div></div>`;var infoWindow = new BMapGL.InfoWindow(sContent, opts);// marker添加点击事件marker.addEventListener('click', function () {this.openInfoWindow(infoWindow); // 弹窗弹出// 监听录音播放完毕_this.audio = document.querySelector('#audio');_this.audio.addEventListener('ended', e => {document.querySelector('#icon2').style.display = 'none'document.querySelector('#icon1').style.display = 'block'});// 图片加载完毕重绘infoWindow// document.getElementById('imgDemo').onload = function () {// infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏// };});// 展示录音控件方法，我们采用的自定义录音样式// <div style="height:30px;line-height:30px;margin-top:10px;display:${item.callRecord ? 'block' : 'none'}">//<span>通话录音：</span>//<div style="display:inline-block;vertical-align: middle;">// <audio// controls// src="${item.callRecord}">// <a href="${item.callRecord}">// Download audio// </a>// </audio>//</div>// </div>// 点击播放暂停录音window.play = (e) => {if (e == 1) {document.querySelector('#icon1').style.display = 'none'document.querySelector('#icon2').style.display = 'block'this.audio.play()} else {document.querySelector('#icon2').style.display = 'none'document.querySelector('#icon1').style.display = 'block'this.audio.pause()}}}})
